/* mobile.css — Peptelligence phone-optimized overrides. * * Applied ONLY when carries the `.mobile-mode` class (set by * mobile-mode.js). Desktop users see no effect until they tap the toggle. * Tuned iPhone-first: safe-area insets honoured, 44px tap targets, * system-font weights, no horizontal scroll on product grids. */ /* ── Root tokens ───────────────────────────────────────────────────────── */ body.mobile-mode { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(184, 134, 11, 0.15); touch-action: manipulation; padding-bottom: env(safe-area-inset-bottom, 0); } /* iOS install button utility — used by install-prompt.js */ .ptl-mobile-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 38px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #0f172a; font: 600 12px/1 system-ui, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; } .ptl-mobile-btn:hover { background: #f8fafc; } .ptl-mobile-btn:active { transform: scale(.97); } .ptl-mobile-btn.is-on { background: #B8860B; color: #fff; border-color: #B8860B; } .ptl-install-btn { margin-left: 6px; } .ptl-install-btn.hidden { display: none !important; } /* Top-bar action cluster on both surfaces wraps nicely on small screens. */ body.mobile-mode #topbar, body.mobile-mode .store-header { flex-wrap: wrap; padding-top: max(14px, env(safe-area-inset-top, 0)); padding-left: max(14px, env(safe-area-inset-left, 0)); padding-right: max(14px, env(safe-area-inset-right, 0)); } /* ── Storefront (agent-dashboard/store.html) ──────────────────────────── */ body.mobile-mode .main { max-width: 100%; padding: 14px 12px 80px; } body.mobile-mode .store-header { gap: 8px; padding: 10px 14px; } body.mobile-mode .sh-brand { font-size: 16px; } body.mobile-mode .store-nav { padding: 8px 12px; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } body.mobile-mode .store-nav .nav-pill { padding: 8px 14px; font-size: 13px; min-height: 36px; scroll-snap-align: start; } body.mobile-mode .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.mobile-mode .product-card { border-radius: 12px; } body.mobile-mode .pc-body { padding: 10px 12px; } body.mobile-mode .pc-name { font-size: 13px; } body.mobile-mode .pc-price { font-size: 16px; } body.mobile-mode .search-input { padding: 12px 14px; font-size: 16px; /* 16px prevents iOS zoom */ border-radius: 10px; } /* Cart icon + primary action buttons: bump to 44x44 tap targets. */ body.mobile-mode .sh-cart, body.mobile-mode .btn, body.mobile-mode button[class*="btn"] { min-height: 44px; padding: 10px 16px; font-size: 14px; } body.mobile-mode .btn.sm { min-height: 36px; padding: 8px 12px; font-size: 12px; } /* Sticky bottom "Add to cart" bar on product detail (if present). */ body.mobile-mode .sticky-cta { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0); padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0)); background: #fff; border-top: 1px solid #e5e7eb; z-index: 80; } /* ── Admin (staging/peptelligence-admin/admin.html) ───────────────────── */ body.mobile-mode #layout { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; } body.mobile-mode #side { flex-direction: row; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; z-index: 90; -webkit-overflow-scrolling: touch; padding-top: max(8px, env(safe-area-inset-top, 0)); } body.mobile-mode #brand { padding: 0 12px 0 4px; white-space: nowrap; flex-shrink: 0; } body.mobile-mode #brand-sub { display: none; } body.mobile-mode #side nav { flex-direction: row; gap: 4px; padding: 0 6px; flex: 1; } body.mobile-mode .nav { white-space: nowrap; padding: 8px 12px; font-size: 12px; min-height: 40px; scroll-snap-align: start; } body.mobile-mode #side-foot { display: none; } body.mobile-mode #topbar { padding: 12px 14px; } body.mobile-mode #topbar h1 { font-size: 16px; } body.mobile-mode .panel { padding: 14px 12px; } /* Data tables: drop to card-style rows on phones. */ body.mobile-mode table.data { display: block; } body.mobile-mode table.data thead { display: none; } body.mobile-mode table.data tbody { display: block; } body.mobile-mode table.data tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: #fff; margin-bottom: 10px; padding: 10px 12px; } body.mobile-mode table.data tr:hover td { background: transparent; } body.mobile-mode table.data td { border-bottom: 0; padding: 3px 0; grid-column: 1 / -1; } body.mobile-mode table.data td.product-cell { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; } body.mobile-mode table.data td.row-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 6px; border-top: 1px dashed #f1f5f9; margin-top: 4px; } /* Toolbar + modal tweaks for phone width. */ body.mobile-mode .toolbar { flex-wrap: wrap; } body.mobile-mode .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } body.mobile-mode .kpi-card { padding: 10px 12px; } body.mobile-mode .kpi-value { font-size: 20px; } body.mobile-mode .modal-box { width: 100%; border-radius: 14px 14px 0 0; align-self: flex-end; max-height: 92vh; } body.mobile-mode .modal { align-items: flex-end; padding: 0; } body.mobile-mode .modal-box .row { grid-template-columns: 1fr; } body.mobile-mode .input { font-size: 16px; /* iOS no-zoom */ } /* Alerts list: compact rows on phones. */ body.mobile-mode .alert-row { padding: 10px 12px; gap: 8px; flex-wrap: wrap; } body.mobile-mode .alert-name { font-size: 13px; } /* Avoid 100vh pitfall on iOS: use dynamic viewport where supported. */ body.mobile-mode, html.mobile-mode { min-height: 100vh; min-height: 100dvh; } /* Respect "Reduce Motion" on iOS. */ @media (prefers-reduced-motion: reduce) { body.mobile-mode, body.mobile-mode * { animation: none !important; transition: none !important; } }