/* ============================================================================ SambaConnector - mobile compatibility layer Loaded LAST in of every page, so equal-specificity rules win by order and no !important is needed except where an existing rule is more specific. Scope of what this fixes (the dashboard already had a working drawer): * platform.html - fixed 230px sidebar + margin-left, zero media queries * index.html - nav links were display:none on mobile with no replacement * all pages - tables overflowing, touch targets under 44px, charts ========================================================================== */ /* ---------- global guards ---------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { max-width: 100%; } @media (max-width: 900px) { body { overflow-x: hidden; } img, canvas, svg, video, iframe { max-width: 100%; } h1, h2, h3, p, td, th, li { overflow-wrap: anywhere; } } /* ---------- tables: scroll inside their own box, never widen the page ------ Guidance is an overflow-x wrapper; the markup has 24 bare elements, so the table itself becomes the scroll container. -webkit-overflow-scrolling gives iOS momentum, and the inline-block wrapper keeps the header aligned. */ @media (max-width: 900px) { table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-collapse: collapse; } table thead, table tbody { display: table; width: 100%; min-width: max-content; } th, td { padding: 10px 12px; font-size: 13px; } /* a hairline on the right edge hints there is more to scroll to */ .panel-card, .card { position: relative; } } /* ---------- touch targets: 44px is the iOS minimum, 48dp Android ---------- */ @media (max-width: 900px) { button, .btn, .nav-item, .footer-btn, a.btn, input[type="submit"] { min-height: 44px; } button, .btn { padding-top: 11px; padding-bottom: 11px; } .mobile-nav-toggle { width: 44px !important; height: 44px !important; } select, input[type="date"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] { min-height: 44px; font-size: 16px; /* below 16px iOS Safari zooms the page on focus */ } .nav-item + .nav-item { margin-top: 4px; } /* 8px total gap between targets */ } /* ---------- charts ---------- */ @media (max-width: 900px) { canvas { max-width: 100% !important; } #mainChart, #hourlyChart { max-height: 260px; } .kpi-card canvas { max-height: 36px; } } /* ============================ platform.html ================================ Super-admin page: a fixed 230px sidebar with margin-left:230px on #main and no responsive rules at all. Rather than bolt a JS drawer onto it, the sidebar becomes a normal block at the top - no JS, nothing to break. Scoped to .platform-page (a class added to that page's ) rather than :has(), which older Android/iOS browsers do not support - and a till or a manager's phone is exactly where an old browser turns up. */ @media (max-width: 860px) { body.platform-page { display: block !important; } body.platform-page #sidebar { position: static !important; width: 100% !important; height: auto !important; padding: 12px 14px !important; } body.platform-page #main { margin-left: 0 !important; padding: 18px 16px 48px !important; } body.platform-page #sidebar .nav-item { display: inline-block; margin: 4px 6px 4px 0; padding: 10px 14px; border-radius: 8px; } } /* ============================ index.html (landing) ========================= The existing rule hides .nav .links entirely below 860px, which removes the navigation with nothing in its place. Show them wrapped under the logo. */ @media (max-width: 860px) { .nav .links { display: flex !important; flex-wrap: wrap; gap: 6px 14px; justify-content: center; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); } .nav { flex-wrap: wrap; } .nav .links a { padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 640px) { .features, .grid-2, .kpi-grid, [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } .hero h1 { font-size: 26px !important; line-height: 1.2; } .hero p { font-size: 15px !important; } } /* ---------- login / register: centred cards on small screens -------------- Scoped to .auth-page. Un-scoped body padding here would also apply to the dashboard and platform pages, which share this stylesheet, and break their fixed layouts. */ @media (max-width: 520px) { body.auth-page { padding: 16px !important; align-items: flex-start !important; } body.auth-page .card, body.auth-page .login-card, body.auth-page form { width: 100% !important; max-width: 100% !important; margin: 24px 0 !important; } body.auth-page h1 { font-size: 21px !important; } } /* ---------- dashboard polish on small screens ---------- */ @media (max-width: 860px) { .topbar-row { flex-wrap: wrap; gap: 8px; } .topbar-row h1 { font-size: 19px !important; } .date-controls { width: 100%; } .panel-card { padding: 14px !important; border-radius: 12px; } .kpi-card { padding: 13px 14px !important; } .kpi-card .kpi-val { font-size: 19px !important; } } @media (max-width: 420px) { .kpi-grid { grid-template-columns: 1fr !important; } }