/* * Society Audit App — mobile-safety layer. * * Loaded last (after tailwind-custom.css) so it overrides where needed. * Goal: prevent horizontal overflow and clipping on phones across ALL * pages, WITHOUT touching: * - report templates (govt PDF/Excel output stays byte-identical) * - the Marathi/English toggle in the navbar * - the logout button or any nav routing * * Strategy: act only at <= 768px breakpoint, only on common offenders * (tables, fixed-width containers, inline-flex rows). Reports are not * affected because they're rendered server-side as PDF/Excel. */ /* ===== App-wide: never let any element create horizontal scroll ===== */ html, body { max-width: 100%; overflow-x: hidden; } /* Belt & suspenders for direct children of . Some hero sections use negative margins that leak past the viewport. */ body > * { max-width: 100vw; } /* ===== Wide tables: wrap them so they scroll INSIDE their cell, not the page ===== Most admin pages render directly without a wrapper. Bootstrap's .table-responsive does this with a div wrapper; we replicate it on the table itself for any table that isn't already inside one. */ @media (max-width: 768px) { /* If a table isn't wrapped in .table-responsive, make it scroll horizontally inside its own block instead of pushing the page. `display:block` on a table breaks some layouts so we limit scope: only narrow viewport, only tables outside .table-responsive. */ table:not(.no-mobile-scroll) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Inside .table-responsive, leave the table alone (Bootstrap handles it). */ .table-responsive > table:not(.no-mobile-scroll) { display: table; overflow: visible; } } /* ===== Hero / landing sections: large fonts must shrink on phones ===== */ @media (max-width: 640px) { /* Index-page hero uses huge inline font sizes. Cap them so the headline stops overflowing on iPhone SE-class widths. */ .display-1, .display-2, .display-3, h1.hero-title, .hero h1, .hero .display-4 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; word-break: break-word; } .lead, .hero p.lead { font-size: 1rem !important; line-height: 1.5 !important; } } /* ===== Forms: stack side-by-side fields on phone ===== */ @media (max-width: 640px) { /* Bootstrap rows with .col-md-6 already stack at md breakpoint, so this is mostly insurance for custom flex rows. */ .row.g-3 > [class*="col-"], .row > [class*="col-md-"], .row > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; } /* Generic flex rows that don't wrap on mobile. */ .d-flex.flex-row:not(.flex-nowrap-keep) { flex-wrap: wrap; } /* Long input groups (e.g. amount + currency) sometimes overflow. */ .input-group { flex-wrap: wrap; } } /* ===== Cards / containers ===== */ @media (max-width: 640px) { /* Drop heavy default desktop padding so cards don't waste 60% of the phone width on white space. */ .card, .card-modern { padding: 0.75rem !important; } .card-body { padding: 0.75rem !important; } /* Cap any element that hard-codes a min-width wider than the phone. */ [style*="min-width"] { min-width: 0 !important; } /* Hard-coded widths in inline styles (legacy templates). */ [style*="width: 1200px"], [style*="width:1200px"], [style*="width: 1000px"], [style*="width:1000px"], [style*="width: 800px"], [style*="width:800px"] { width: 100% !important; max-width: 100% !important; } } /* ===== Buttons: full-width on phone for thumb-friendly tap targets ===== */ @media (max-width: 640px) { /* Make form-submit buttons span the row instead of squeezing right. */ .btn-block-mobile, form .btn-primary[type="submit"], form .btn-success[type="submit"] { display: block; width: 100%; } /* Stack inline button rows. */ .btn-group:not(.btn-group-keep) { flex-wrap: wrap; width: 100%; } .btn-group:not(.btn-group-keep) > .btn { flex: 1 1 auto; } } /* ===== Navbar mobile polish ===== The actual navbar markup is in base.html. On mobile (< 992px) it shows brand + EN/MR + hamburger; the hamburger opens a right-side off-canvas drawer. These rules just polish padding + the brand on narrow widths. */ @media (max-width: 991.98px) { .navbar-custom { padding-left: max(0.75rem, env(safe-area-inset-left)) !important; padding-right: max(0.75rem, env(safe-area-inset-right)) !important; } .navbar-brand { font-size: 1rem !important; } } @media (max-width: 400px) { /* Trim the brand on iPhone SE-class widths so it doesn't push the EN/MR toggle off the row. The drawer covers full nav anyway. */ .navbar-custom .navbar-brand span { max-width: 110px; } } /* ===== Dashboard stat tiles: 2-column instead of 4-column on phone ===== */ @media (max-width: 640px) { .stats-grid, .dashboard-stats, .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== Images and embeds: never overflow ===== */ img, iframe, video, svg { max-width: 100%; height: auto; } /* ===== Code/pre blocks (occasionally seen on error pages) ===== */ pre, code { white-space: pre-wrap; word-break: break-word; } /* ===== Reports: explicitly opt OUT of all the above ===== */ /* Any report page that renders the Govt format MUST keep its layout exactly. The print stylesheet handles paper output; for on-screen preview, we override the mobile-safety rules so report tables stay full-width. */ .report-page table, .report-letterhead table, .print-only table, [data-report] table { display: table !important; overflow: visible !important; } .report-page, .report-letterhead, .print-only, [data-report] { overflow-x: auto; /* report can scroll horizontally if needed */ -webkit-overflow-scrolling: touch; } /* ============================================================ Professional polish layer (added 2026-05-30) ============================================================ Tightens spacing, ensures 44px+ tap targets per Apple HIG / WCAG 2.5.5, and makes admin sidebar reliably toggleable on phones. Does NOT touch reports, the EN/MR toggle UI, or any routing. */ /* ----- Tap target floor: links and buttons must be at least 44x44 ----- */ @media (max-width: 768px) { .btn, .nav-link, .navbar-actions a, .navbar-actions button, .dropdown-item, .lang-btn { min-height: 40px; } /* Slightly larger touch zone for primary CTAs */ .btn-primary, .btn-success, .btn-lg { min-height: 44px; } } /* ----- Admin/User sidebar reliability fix ----- Some templates render the sidebar inside .content-wrapper which clipped it off-screen. Force the off-canvas drawer to sit above content. */ @media (max-width: 992px) { .admin-sidebar { transform: translateX(-100%); } .admin-sidebar.show { transform: translateX(0) !important; } } /* ----- Page header buttons wrap cleanly on phone ----- */ @media (max-width: 640px) { .page-header { flex-wrap: wrap !important; gap: 0.6rem; } .page-header > div { width: 100%; justify-content: flex-start !important; } .page-header h3 { width: 100%; text-align: left !important; } } /* ----- Forms: thumb-friendly spacing on phone ----- */ @media (max-width: 640px) { .form-control, .form-select, textarea.form-control { min-height: 44px; font-size: 16px; /* prevents iOS Safari auto-zoom on focus */ } textarea.form-control { min-height: 90px; } } /* ----- Modal: snap to full-screen on phones for breathing room ----- */ @media (max-width: 576px) { .modal-dialog { margin: 0 !important; min-height: 100dvh; min-height: 100vh; } .modal-content { border-radius: 0; min-height: 100dvh; min-height: 100vh; } .modal-header, .modal-body, .modal-footer { padding: 1rem; } } /* ----- Dashboard stat tiles: graceful 2-col layout ----- */ @media (max-width: 640px) { .row.g-3 > .col-md-3, .row.g-3 > .col-md-4, .row.g-4 > .col-md-3, .row.g-4 > .col-md-4, .row > .col-md-3, .row > .col-md-4 { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 400px) { .row > .col-md-3, .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; } } /* ----- Tables in a .table-responsive container: smooth iOS scrolling ----- */ .table-responsive { -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* ----- Generic safety: never let absolutely-positioned tooltips/popovers create horizontal scroll on phones ----- */ @media (max-width: 768px) { .tooltip, .popover { max-width: 90vw; } } /* ----- Footer: stack columns cleanly + center on phone ----- */ @media (max-width: 640px) { .saas-footer { padding: 2.5rem 0 1.25rem !important; } .saas-footer .footer-brand { font-size: 1.1rem !important; } .saas-footer h6 { margin-top: 0.5rem; } .saas-footer .footer-tagline { max-width: none !important; } }