/* ============================================================================ Xpand — Mobile stylesheet ---------------------------------------------------------------------------- Phase 1 of the "make Xpand mobile friendly" effort. Kept in its OWN file (instead of inlined in the index.html monolith) so it stays reviewable and maintainable — the first step of the CSS split described in SCALABILITY_PLAN.md (Phase 2, modularize). Design rules for everything in here: 1. Everything is inside `@media (max-width: 767px)` — desktop is NEVER touched, so this file cannot regress the current UI. 2. No aggressive global overrides. The legacy public/responsive.css (now unused) forced `input { width:100% }` and `[style*=grid]{display:block}`, which broke the inline price/qty/section editors. We do not do that. 3. Wide content (tables) scrolls INSIDE its own container; the page body itself never scrolls sideways. To edit: change rules here and bump the `?v=` query on the in index.html so browsers pick up the new file. ========================================================================== */ @media (max-width: 767px) { /* ---- Base -------------------------------------------------------------- */ html { font-size: 15px; } /* Page never scrolls sideways; wide blocks get their own scroll box below. */ body { overflow-x: hidden; } /* ---- Header cosmetics (layout itself lives in theme-xpand-dark.css) ---- The top bar is a FIXED, single 54px row. On a phone the logo + EN + user badge + Refresh + Logout don't all fit, so the Logout button used to spill off the right edge and become untappable. Free up room: keep only the small X mark (hide the "Xpand" word + version), icon-only Refresh, tight gaps — so every action (incl. Logout) stays on screen. */ .header { overflow: visible !important; gap: 0.3rem !important; } .header .logo { flex-shrink: 0 !important; margin: 0 !important; } .header .logo h1 { display: none; } /* keep the X icon, drop the word */ .header .logo img { height: 26px; margin-right: 0; } .logo-version { display: none; } .header > div:last-child { gap: 0.35rem !important; min-width: 0 !important; flex-wrap: nowrap !important; } #langToggleBtn { margin-right: 0 !important; padding: 0.2rem 0.45rem !important; font-size: 0.7rem !important; flex-shrink: 0; } #userInfo { font-size: 0.75rem; min-width: 0; } #userBadge { padding: 0.2rem 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; display: inline-block; } .header-buttons { gap: 0.3rem; flex-shrink: 0; } .header-buttons .btn { padding: 0.3rem 0.5rem; font-size: 0.72rem; } /* Hide inline labels that only fit on desktop (e.g. the "Refresh" word). */ .hide-on-mobile { display: none !important; } /* Hide the scrollbar on the horizontal tab strip (layout set by theme). */ .tabs::-webkit-scrollbar { display: none; } .tabs { scrollbar-width: none; -ms-overflow-style: none; } /* ---- Grids collapse to a single column --------------------------------- */ .stats-grid, .two-columns, .three-columns { grid-template-columns: 1fr !important; gap: 0.6rem; } /* ---- Cards ------------------------------------------------------------- */ .card { padding: 0.8rem; } .card-header { flex-wrap: wrap; gap: 0.4rem; } /* ---- Tables scroll inside their own box, never widen the page ---------- */ .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dataTables_wrapper table.dataTable { white-space: nowrap; } .dataTables_filter, .dataTables_length { float: none; text-align: left; margin-bottom: 0.4rem; } .dataTables_paginate { float: none; text-align: center; } /* Event header stacks: the title/date block takes the full width (so long names like "Liverpool FC vs Sunderland" don't get squeezed into a narrow column and broken mid-word), badges/buttons wrap onto the next line. */ .event-group-header { flex-direction: column; align-items: stretch; gap: 0.4rem; } .event-group-header > div:last-child { flex-wrap: wrap; } .event-group-title { font-size: 0.95rem; white-space: normal; overflow-wrap: anywhere; word-break: normal; } .event-group-info { font-size: 0.72rem; white-space: normal; } /* ---- Listings: dense event-group table → stacked CARDS on mobile ------- Each listing row becomes a card; each cell is a "label: value" line (label comes from the td's data-label). The header row is hidden. Only affects the Listings tab tables (scoped to .event-group-content). */ .event-group-content .simple-table, .event-group-content .simple-table tbody { display: block; width: 100%; } .event-group-content .simple-table thead { display: none; } .event-group-content .simple-table tr { display: block; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; margin: 0 0 8px; padding: 4px 10px; } .event-group-content .simple-table td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; border: none !important; padding: 5px 0; text-align: right; min-width: 0; } .event-group-content .simple-table td::before { content: attr(data-label); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 700; text-align: left; } .event-group-content .simple-table td[data-label="Actions"] { justify-content: flex-start; } /* Market-position inline row (under a listing) spans the full card, no label */ .event-group-content .simple-table tr.sh-pos-inline { background: transparent; border: none; border-radius: 0; margin: -6px 0 8px; padding: 0; } .event-group-content .simple-table tr.sh-pos-inline td { display: block; text-align: left; } .event-group-content .simple-table tr.sh-pos-inline td::before { display: none; } /* ---- Class-based modals become full-screen sheets ---------------------- */ .modal-overlay { padding: 0 !important; } .modal-overlay .modal, .modal-content, .modal-box { width: 100% !important; max-width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 !important; } /* ---- Forms: 16px prevents iOS auto-zoom on focus (no width override) --- */ input, select, textarea { font-size: 16px; } /* ---- Comfortable tap targets ------------------------------------------ */ .btn { min-height: 34px; } /* ---- Quick Listing: make the create-listing form usable on a phone ----- The field row is a wide single line that you'd otherwise have to scroll sideways to fill. Let it WRAP, and stack each field as "label above input" so every field is visible and tappable. */ .ql-inline-row { flex-wrap: wrap !important; overflow-x: visible !important; gap: 10px 12px !important; align-items: flex-start !important; } .ql-inline-row .ql-field { flex-direction: column; align-items: flex-start; gap: 2px; } .ql-inline-row .ql-field label { font-size: 0.62rem; } /* Give the free-text fields room; keep the tiny numeric ones compact. */ .ql-inline-row .ql-line-section { width: 100% !important; min-width: 140px; } .ql-inline-row .ql-field select { min-width: 120px; } } /* ============================================================================ Mobile bottom navigation — makes the app feel native on phones. The busy top tab strip is replaced by a fixed bottom bar (most-used destinations) + a "More" sheet for everything else. See /app/mobile-nav.js. These elements are display:none on desktop. ========================================================================== */ #mobileNav, #mobileMoreSheet { display: none; } @media (max-width: 767px) { /* Collapse the top tab strip (its buttons stay in the DOM so the "More" sheet can read them + respect per-tier gating). Header stays on top. */ .tabs { visibility: hidden !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; border: none !important; pointer-events: none !important; overflow: hidden !important; } .tab-content { margin-top: var(--topbar-height, 54px) !important; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } /* Bottom bar */ #mobileNav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 58px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg-sidebar, var(--bg-secondary)); border-top: 1px solid var(--border-subtle, var(--border-color)); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28); } .mnav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 0.62rem; padding: 6px 2px; transition: color 0.15s ease; } .mnav-item .mnav-ico { font-size: 1.15rem; line-height: 1; } .mnav-item.active { color: #a78bfa; } /* "More" sheet (slides up from the bottom) */ #mobileMoreSheet { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #mobileMoreSheet.open { opacity: 1; pointer-events: auto; } #mobileMoreSheet .mmore-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 76vh; overflow-y: auto; background: var(--bg-secondary); border-radius: 16px 16px 0 0; padding: 0.5rem 0.75rem calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.25s ease; } #mobileMoreSheet.open .mmore-panel { transform: translateY(0); } .mmore-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.4rem; font-weight: 600; color: var(--text-primary); } .mmore-close { background: none; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; } .mmore-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mmore-item { text-align: left; padding: 0.7rem 0.75rem; border-radius: 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.82rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmore-item:active { background: rgba(124, 58, 237, 0.18); } }