/* * mobile.css — Responsive / mobile overrides for Church Genius Pro * * Loaded on every page (injected by session.js for authenticated pages; * linked directly in for unauthenticated pages like login.html). * * Breakpoints * ≤ 768px tablet / large phone — sidebar becomes a slide-over overlay * ≤ 480px small phone — tighter grid / font tweaks */ /* ── Mobile sidebar backdrop overlay ─────────────────────────────────────── */ #mobileNavBackdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 200; -webkit-tap-highlight-color: transparent; } #mobileNavBackdrop.visible { display: block; } /* ═══════════════════════════════════════════════════════════════════════════ ≤ 768 px — Tablet / phone layout ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Sidebar: fixed slide-over overlay ─────────────────────────────────── */ .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: 260px !important; min-width: 260px !important; transform: translateX(-100%); transition: transform 0.28s ease !important; z-index: 300 !important; /* Override the desktop width-collapse behavior */ overflow-y: auto !important; } /* Collapsed state on desktop means nothing on mobile — open/close via transform */ .sidebar.collapsed { width: 260px !important; min-width: 260px !important; transform: translateX(-100%); } /* Mobile-open state — added/removed by session.js toggleSidebar */ .sidebar.mobile-open { transform: translateX(0) !important; } /* ── Topbar ─────────────────────────────────────────────────────────────── */ .topbar { padding: 0 12px !important; position: sticky; top: 0; z-index: 150; } .topbar-left { gap: 10px !important; } .topbar-right { gap: 10px !important; } /* Hide desktop search bar — too wide for mobile topbar */ .search-wrap { display: none !important; } /* Topbar username: truncate on narrow screens */ .tb-username { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hamburger: larger touch target */ .btn-toggle { font-size: 22px !important; padding: 8px !important; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; } /* ── Page content padding ───────────────────────────────────────────────── */ .page-content { padding: 14px !important; } /* ── Dashboard banner ───────────────────────────────────────────────────── */ .banner { padding: 20px 16px 0 !important; } .banner-greeting { font-size: 20px !important; } .banner-sub { font-size: 12px !important; margin-bottom: 16px !important; } /* Stat cards: 2 columns on tablet */ .stat-cards { grid-template-columns: repeat(2, 1fr) !important; } /* ── Dashboard body / sections ──────────────────────────────────────────── */ .dash-body { padding: 0 14px 20px !important; } .dash-body-section { padding: 0 14px !important; } .ai-search-wrap { padding: 14px 14px 0 !important; } /* Collapse all multi-column dashboard rows to single column */ .dash-row { grid-template-columns: 1fr !important; } .cols-6-4 { grid-template-columns: 1fr !important; } .cols-1 { grid-template-columns: 1fr !important; } /* Accountant income/expense category grid */ .acct-cats { grid-template-columns: repeat(2, 1fr) !important; } /* Customize panel — make full width on mobile */ .cust-panel { width: 100% !important; max-width: 100% !important; } /* ── Form grids: single column ──────────────────────────────────────────── */ .form-grid { grid-template-columns: 1fr !important; } .form-grid.cols-3 { grid-template-columns: 1fr !important; } .span-2 { grid-column: span 1 !important; } .span-3 { grid-column: span 1 !important; } /* Date row (Day / Month / Year) — keep 3 cols, reduce gap */ .date-row { gap: 6px !important; } /* Form card body: tighter padding */ .form-card-body { padding: 16px 16px 20px !important; } /* ── Table wrappers: ensure smooth horizontal scroll ───────────────────── */ .table-wrap, .members-table-wrap, .meetings-table-wrap, .events-table-wrap, .reg-table-wrap, .sub-table-wrap, .ltr-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Prevent table cells from wrapping onto multiple lines on small screens */ .table-wrap table th, .table-wrap table td { white-space: nowrap; } /* ── Navigation touch targets ───────────────────────────────────────────── */ .nav-item-btn { padding: 13px 20px !important; min-height: 44px; } .nav-sub-btn { padding: 12px 20px 12px 46px !important; min-height: 40px; } /* ── Filter / toolbar rows ──────────────────────────────────────────────── */ .filter-row, .table-toolbar, .table-controls { flex-wrap: wrap !important; gap: 8px !important; } .filter-row select, .filter-row input, .filter-row button { min-width: 0; flex: 1 1 120px; } /* ── Report pages ───────────────────────────────────────────────────────── */ .report-filters, .report-header { flex-wrap: wrap !important; gap: 10px !important; } .report-filters select, .report-filters input { flex: 1 1 140px; } /* ── Modals / dialogs ───────────────────────────────────────────────────── */ .modal-overlay .modal, .modal-box, .dialog-box { width: calc(100vw - 28px) !important; max-width: 100% !important; margin: 14px !important; border-radius: 12px !important; } /* ── Page header (title + action button) ───────────────────────────────── */ .page-header { flex-wrap: wrap !important; gap: 10px !important; } /* ── Card body padding ──────────────────────────────────────────────────── */ .card-body { padding: 12px 14px 16px !important; } .card-hdr { padding: 14px 14px 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ ≤ 480 px — Small phone layout ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* Stat cards: single column on small phones */ .stat-cards { grid-template-columns: 1fr !important; } /* Accountant category grid: single column */ .acct-cats { grid-template-columns: 1fr !important; } /* Hide topbar username completely */ .tb-username { display: none !important; } /* Reduce topbar title font size */ .topbar-title { font-size: 13px !important; } /* Page title */ .page-title { font-size: 18px !important; } /* Banner */ .banner-greeting { font-size: 18px !important; } /* Form card header padding */ .form-card-header { padding: 12px 16px !important; } /* Tighten page content further */ .page-content { padding: 10px !important; } /* AI search bar wraps on small screens */ .ai-search-bar { flex-wrap: wrap; gap: 8px !important; } .ai-search-btn { width: 100%; justify-content: center; } /* Bottom action bars / button rows */ .btn-row, .action-row, .form-actions { flex-direction: column !important; gap: 8px !important; } .btn-row button, .action-row button, .form-actions button { width: 100% !important; } } /* ── PWA: safe area insets (notch / home indicator) ─────────────────────── */ @supports (padding: env(safe-area-inset-top)) { .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .sidebar { padding-bottom: env(safe-area-inset-bottom); } .page-content { padding-bottom: max(14px, env(safe-area-inset-bottom)); } }