/* ========================================================================== QCall — responsive.css Shared responsive overrides. Linked LAST in each page . This file only holds rules that markup/Bootstrap utilities cannot solve. Fix layout in the EJS first; add CSS here only as a last resort. -------------------------------------------------------------------------- REPEATABLE RESPONSIVE CHECKLIST (apply to every page) -------------------------------------------------------------------------- 1. Head — ensure viewport meta exists; add this file as the last stylesheet link. 2. Fixed — remove every inline style with px height/width; use Bootstrap sizing utilities (w-100, h-auto, ratio) or a named class here. Never add new fixed-pixel inline styles. 3. Grid — every .col-* needs an explicit base size; use the mobile-first ladder col-12 col-md-* col-xl-*; no bare col-xl-*. 4. Text — drop text-nowrap on dynamic data; use text-break/text-truncate; wrap every table in .table-responsive. 5. Components— charts get a responsive breakpoints array (no single hardcoded height, no pixel offsetY titles); images get img-fluid; modals use modal-dialog-scrollable. 6. Visibility— audit d-none / d-*-block; never hide essential content on mobile. 7. Verify — test at 320/375/425/768/1024/1440px before moving on. ========================================================================== */ /* Dashboard — Section 4 info tiles. Keep the three tiles visually even with the chart on desktop, without a fixed height that would clip text on small screens. */ @media (min-width: 992px) { .tilebox-one { min-height: 144px; } } /* QR code preview boxes are a fixed 310px square (custom-qr.css), which overflows the smallest phones. Keep them on-screen and square below 360px. */ @media (max-width: 359.98px) { .qr-code-preview { width: 88vw !important; height: 88vw !important; } } /* DataTables: keep the "Show entries" and "Search" controls on one line on phones (instead of stacking) by shrinking them. Applies to all list pages. */ @media (max-width: 767.98px) { .dataTables_wrapper .row:has(.dataTables_length) > div { width: 50%; flex: 0 0 50%; max-width: 50%; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { font-size: 12px; white-space: nowrap; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: 4px; margin-bottom: 0; } .dataTables_wrapper .dataTables_filter { text-align: right; } .dataTables_wrapper .dataTables_filter label { justify-content: flex-end; } .dataTables_wrapper .dataTables_filter input { width: 100%; min-width: 0; margin: 0 !important; } .dataTables_wrapper .dataTables_length select { padding-top: 2px; padding-bottom: 2px; } } /* Tables tagged .data-table-three-dot-action-btn override .table-responsive to overflow-x:visible (so the row action dropdown isn't clipped). On mobile that lets a wide table push the whole page sideways. Restore horizontal scroll, and keep enough height for the action dropdown to open inside the scroll area. */ @media (max-width: 991.98px) { .table-responsive.data-table-three-dot-action-btn { overflow-x: auto !important; min-height: 320px; } } /* Centre all modals vertically on mobile (Bootstrap shows them top-aligned by default). Applies app-wide so every page's modals are consistent. */ @media (max-width: 991.98px) { .modal-dialog:not(.modal-dialog-centered) { display: flex; align-items: center; min-height: calc(100% - 1rem); } } /* Select2 appends its open dropdown to . The theme forces every .select2-container to width:100% !important, so that body-level dropdown spans the whole page and, positioned at the field's offset, overflows the screen on mobile. Size the body-level dropdown to its content instead. */ @media (max-width: 991.98px) { body > .select2-container { width: auto !important; max-width: calc(100vw - 5rem) !important; } } /* Card headers with an action button: on phones keep the button on the right and let a long title wrap onto multiple lines beside it (button stays put). */ @media (max-width: 767.98px) { .card-header.d-flex.justify-content-between { align-items: flex-start !important; gap: 0.75rem; } .card-header.d-flex.justify-content-between .btn { flex-shrink: 0; } } /* manager-permissions: each permission's checkbox options as one roomy, horizontally-scrollable line on phones instead of an uneven wrap. */ @media (max-width: 767.98px) { #with-badges-preview .list-group-item { padding: 0.9rem 1rem; } #with-badges-preview .list-group-item > h5 { margin-bottom: 0.7rem; } #with-badges-preview .list-group-item > .d-flex { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 8px; } #with-badges-preview .list-group-item > .d-flex > .form-check { flex-shrink: 0; margin-right: 1.25rem !important; } } /* QR create/customize wizard — on phones, centre everything inside the card (headings, preview, etc.) and show Back/Next as a compact centred pair. */ @media (max-width: 575.98px) { .qr-v2 .card-body { text-align: center; } .qr-v2 .qr-code-preview { margin-left: auto; margin-right: auto; } .buttonBox { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.75rem; margin-left: 0; margin-right: 0; } .buttonBox > [class*='col-'] { flex: 0 0 auto; width: auto !important; max-width: none !important; padding-left: 0; padding-right: 0; } } /* QR template choosers — on phones, show templates as a horizontal swipeable slider (one at a time, with the next peeking in) instead of a long list. Covers both the QR-design template grid and the service-page template grid. */ @media (max-width: 575.98px) { .qr-template-container, .qr-template-selection-grid { display: flex !important; flex-wrap: nowrap !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; } .qr-template-container .template-item, .qr-template-selection-grid .template-option { flex: 0 0 82% !important; width: auto !important; max-width: none !important; scroll-snap-align: center; } } /* QR Function step preview — the service-page template is rendered inside an isolated