/* ═══════════════════════════════════════════════════════════════ BVC Mobile — drop-in responsive CSS Usage: Add that one line to of each page. Done. ═══════════════════════════════════════════════════════════════ */ /* ─── Phone (<640px) ──────────────────────────────────────────── */ @media (max-width: 640px) { /* ── Topbar: wrap into rows, full-width search ──────────── */ .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; } .brand { font-size: 14px; } .brand small { display: none; } .spacer { flex-basis: 100%; height: 0; order: 2; } .search { width: 100%; order: 3; font-size: 14px; padding: 10px 12px; border-radius: 8px; } .back { order: 0; padding: 6px 10px; font-size: 12px; } .btn { padding: 8px 12px; font-size: 12px; } .btn-ghost { order: 4; } .btn-conn { order: 5; } /* ── Subbar / tabs ──────────────────────────────────────── */ .subbar { padding: 6px 12px; gap: 6px; } .tab { padding: 6px 12px; font-size: 12px; } .order-count { padding: 6px 12px; font-size: 11px; } /* ── Table: tighter cells, scrollable ───────────────────── */ .table-wrap { max-height: calc(100vh - 130px); -webkit-overflow-scrolling: touch; } th { padding: 6px 8px; font-size: 9px; } td { padding: 6px 8px; font-size: 11px; } table { font-size: 11px; } /* ── Detail panel: stack vertically ─────────────────────── */ .detail-wrap { flex-direction: column; padding: 16px 12px; gap: 20px; } .detail-section { min-width: unset !important; flex: unset !important; } .line-items { font-size: 11px; } .line-items th { font-size: 9px; padding: 4px 6px; } .line-items td { padding: 4px 6px; font-size: 11px; } .addr-line { font-size: 11px; } .totals-row { font-size: 11px; } /* ── Serial assignment: stack assign button ─────────────── */ .btn-assign { padding: 4px 10px; font-size: 11px; } .serial-tag { font-size: 9px; padding: 2px 6px; } .serial-input { width: 100px; font-size: 11px; padding: 4px 6px; } /* ── TouchTunes specifics ───────────────────────────────── */ select { padding: 8px !important; font-size: 14px !important; min-width: 0 !important; } .btn-danger, .btn-green { padding: 10px 16px !important; font-size: 13px !important; } /* ── Products page: hide low-priority columns ───────────── */ /* Columns with less value on mobile get hidden via nth-child */ /* These are safe to hide — user can still expand row for full detail */ /* ── Overlay / device code popup ────────────────────────── */ #dcOverlay > div { max-width: 95vw !important; padding: 24px 16px !important; } #dcCode { font-size: 24px !important; letter-spacing: 2px !important; padding: 12px !important; } /* ── Toast: full width on mobile ────────────────────────── */ .toast { left: 12px; right: 12px; bottom: 12px; text-align: center; } /* ── Home page: bigger touch tiles ──────────────────────── */ .desktop { padding: 24px 16px; gap: 16px; justify-content: center; } .app-tile { width: 110px; height: 110px; } .app-icon { width: 42px; height: 42px; } .app-label { font-size: 11px; } /* ── Billing table (touchtunes) ─────────────────────────── */ .billing-table th, .billing-table td { padding: 4px 6px; font-size: 10px; } } /* ─── Small tablet (641-900px) ────────────────────────────────── */ @media (min-width: 641px) and (max-width: 900px) { .topbar { padding: 8px 16px; gap: 10px; } .brand small { display: none; } .search { width: 180px; } .detail-wrap { gap: 20px; padding: 16px 20px; } .detail-section { min-width: 240px !important; } }