/* ============================================================ AMS Fone CRM — Mobile Responsive Overrides ------------------------------------------------------------ ONE file, mobile-only. EVERY rule lives inside a @media (max-width: 768px) or (max-width: 480px) block, so on desktop (>=769px) this file is a complete no-op. SAFETY CONTRACT (do not break): - Never edit existing CSS files; all mobile fixes live here. - No rule outside a max-width media query. - Linked LAST in each page so it wins on equal specificity. - Desktop look must stay byte-identical. Design tokens are FROZEN: AMS Blue #03A9F4 / var(--ams-blue), Plus Jakarta Sans, desktop sidebar 260px. Layout note: common.css already handles the shared shell on mobile (sidebar off-canvas + hamburger <=1024px, generic table overflow-x, .form-actions/.page-actions buttons <=480px). This file only adds PAGE-SPECIFIC fixes that common.css doesn't cover. v=20260623-MOBILE ============================================================ */ /* ============================================================ GLOBAL SAFETY NET (all pages) — kill horizontal overflow. ============================================================ */ @media (max-width: 768px) { /* Nothing should force the document wider than the viewport. */ html, body { max-width: 100%; overflow-x: hidden; } } /* ============================================================ GLOBAL COMPONENT FIXES (shared classes, help many pages) ============================================================ */ /* --- Top toolbar (.page-actions): keep buttons in a tidy WRAPPING row. common.css forces `flex-direction:column !important` + buttons width:100% at <=480, which makes the Import/Export/Add buttons stack full-width and ugly. Override back to a horizontal row that WRAPS (not nowrap-scroll, which collapses nested groups like the Notes date-filter into a vertical stack). (.form-actions / .form-footer are intentionally left full-width — that's good UX for Save/Cancel on forms — so we only touch .page-actions.) */ @media (max-width: 768px) { .page-actions { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; } .page-actions .btn, .page-actions button, .page-actions a.btn { width: auto !important; flex-shrink: 0 !important; } /* Nested filter-pill groups inside a toolbar must wrap their own pills. */ .page-actions .date-filters { flex-wrap: wrap !important; } } /* --- Header search box: a flex item with default min-width:auto can't shrink below its content, so a long search field overflows the top header. Let it shrink. */ @media (max-width: 768px) { .top-header .header-search, .header-search { min-width: 0 !important; } } /* --- Auto-refresh play/pause toggle (.ams-ar-toggle): on mobile it gets stretched into a tall oval — its width is pinned to ~28px but common.css's `button{min-height:44px}` touch-target rule forces the height to 44. Pin BOTH dimensions (incl. min-height/min-width) so it stays a clean circle. The compound selectors out-specify `.page-actions button{width:auto}`. */ @media (max-width: 768px) { button.ams-ar-toggle, .page-actions .ams-ar-toggle, .ams-ar-toggle { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; flex-shrink: 0 !important; border-radius: 50% !important; padding: 0 !important; } } /* ============================================================ PER-PAGE SECTIONS ============================================================ */ /* --- Stacked-table CARD list (contacts.html, pipeline.html table view): below 640px common.css turns each table row into a card (.ams-stacked-table), BUT the generic data-table rules still force the inner to min-width:720px and keep the wrapper overflow-x:auto — so each card is laid out 720px wide and the card strip scrolls sideways, showing empty space on a left-swipe. Pin the stacked table to the viewport width so cards fit and the strip never scrolls. Scoped to <=640px to match where the card layout turns on (the 641-768px real-table horizontal scroll stays intact). */ @media (max-width: 640px) { .table-wrapper.ams-stacked-table { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .ams-stacked-table table, .ams-stacked-table > table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } .ams-stacked-table tbody tr, .ams-stacked-table tbody td { max-width: 100% !important; box-sizing: border-box; } /* Long names + the inline temperature badge (e.g. "Arbaz Bhai Don 😎" + Warm): let the row shrink and the text wrap instead of pushing the card wider. */ .ams-stacked-table .contact-cell, .ams-stacked-table .contact-info { min-width: 0 !important; } .ams-stacked-table .contact-name { overflow-wrap: anywhere; word-break: break-word; white-space: normal; } } /* --- Notifications bell dropdown (.ams-notif-panel, built in common.js). The panel is position:absolute inside .ams-notif-wrap — a ~40px inline-flex wrapper around the bell. common.css's mobile rule sets left:8/right:8/width:auto on it, but because those offsets resolve against the 40px wrapper (not the viewport) the panel collapses to a ~24px vertical strip. Re-anchor it to the VIEWPORT with position:fixed so it opens full-width below the header. The panel's base styles are inline JS + the common.css rule uses !important, so these need !important to win. */ @media (max-width: 768px) { .ams-notif-panel { position: fixed !important; top: 72px !important; /* just below the ~69px sticky header */ left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 88px) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Single scroll on the panel; let the inner list flow full-width. */ .ams-notif-list { max-height: none !important; overflow: visible !important; } .ams-notif-row { white-space: normal !important; overflow-wrap: anywhere !important; } } /* --- Quick-action popup (contacts / pipeline / tasks). Its CSS is injected into a runtime