/* ============================================================================ ViyaBook — TABLET layout (768px – 1024px) ---------------------------------------------------------------------------- Three breakpoints app-wide: Mobile 0 – 767px (viyabook-mobile.css mobile overhaul) Tablet 768 – 1024 (THIS FILE) Desktop 1025px+ (base styles) Tablets must NOT inherit the phone layout. This sheet loads LAST, so within the tablet range it wins the cascade: it restores the real (desktop-style) shell + tables, sets 2-up cards / 2-col forms, gives POS a real products|cart split, and respects iPad / Android safe areas. iPad portrait is exactly 768px, so it is a TABLET here — never a phone. ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* ── 1. Shell & content width ───────────────────────────────────────────── Desktop-style shell (sidebar visible), trimmed mobile spacing, more content width, and NO horizontal page scroll. Safe-area insets for iPad/Android. */ html, body { overflow-x: hidden !important;overflow-x:clip !important; } .dashboard-shell { display: flex !important; } body .main-content, body .main, body .viya-main { padding: 18px max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)) !important; min-width: 0 !important; overflow-x: hidden !important; background: var(--bg, #f4f6f9) !important; } /* Page header back to a single tidy row (not the stacked, oversized mobile one). */ .page-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; padding: 0 0 16px !important; } .page-head h1, .page-h1 { font-size: 22px !important; } /* Actions / filters stay on ONE row (wrap, don't scroll sideways). */ .head-actions, .page-actions, .actions, .filter-bar, .vb-filter-bar, .toolbar, .inv-filters, .tools { display: flex !important; flex-wrap: wrap !important; overflow-x: visible !important; gap: 10px !important; width: auto !important; } /* ── 2. Cards: exactly 2 per row, equal width & height ───────────────────── */ .summary-grid, .stats-grid, .stats, .metrics, .metric-grid, .kpi-grid, .type-grid, .cards-grid, .card-grid, .stat-cards, .dashboard-grid, .bottom-grid, .summary-cards, .mini-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; } .summary-grid > *, .stats-grid > *, .metrics > *, .kpi-grid > *, .type-grid > *, .cards-grid > *, .summary-cards > *, .mini-cards > * { height: 100% !important; min-width: 0 !important; } /* ── 3. Tables: real desktop tables (NOT stacked mobile cards); scroll only inside the wrapper when a table is genuinely too wide. ──────────────────── */ .main-content table, .main-content .vb-cardify { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; } .main-content table thead, .main-content .vb-cardify thead { display: table-header-group !important; } .main-content table tbody, .main-content .vb-cardify tbody { display: table-row-group !important; } .main-content table tr, .main-content .vb-cardify tr { display: table-row !important; } .main-content table th, .main-content table td, .main-content .vb-cardify th, .main-content .vb-cardify td { display: table-cell !important; width: auto !important; text-align: inherit !important; } /* Kill the mobile "LABEL:" pseudo-labels — real headers are back. */ .main-content table td::before, .main-content .vb-cardify td::before { content: none !important; } /* Wrapper scrolls internally as a last resort, never the whole page. */ .table-wrap, .table-card, .table-shell, .td-table-wrap, .trip-invoices-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } /* ── 4. Forms: 2 columns where space allows ──────────────────────────────── */ .form-grid, .grid-2, .modal-grid, .form-row, .field-grid, .two-col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 16px !important; } .form-grid .full, .grid-2 .full, .modal-grid .full, .form-grid [style*="grid-column:1/-1"], .modal-grid [style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; } /* ── 5. Buttons: medium, uniform height & spacing ─────────────────────────── */ .btn, .btn-primary, .btn-secondary, .btn-soft, .btn-ghost, .act-btn { height: 42px !important; min-height: 42px !important; padding: 0 16px !important; font-size: 14px !important; } .btn-sm { height: 36px !important; min-height: 36px !important; padding: 0 12px !important; } /* ══════════════════════════════════════════════════════════════════════════ 6. CHECKOUT / SALES POS — real split, never the stacked phone layout. Left = products (~62%), Right = cart (~38%), cart stays visible while the product list scrolls. Product grid 3–4 per row, payment buttons wrap to 2 rows, nothing clipped, no horizontal page scroll. ══════════════════════════════════════════════════════════════════════════ */ /* Sales POS (sales.html) */ .pos-main-grid { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr) !important; gap: 16px !important; align-items: start !important; } .pos-main-grid .cart-panel { position: sticky !important; top: 12px !important; max-height: calc(100vh - 90px) !important; max-height: calc(100dvh - 90px) !important; overflow: auto !important; } .pos-main-grid .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pos-main-grid .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } /* Checkout (checkout.html) — flex/grid split with a sticky cart column. */ .pos-body { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 380px) !important; height: calc(100dvh - 52px) !important; min-height: 0 !important; overflow: hidden !important; } .pos-body .cart-panel, .pos-body .order-panel { height: 100% !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; border-left: 1px solid var(--border, #e2e8f0) !important; } /* Cart body scrolls; totals / customer / payment / print+PDF stay pinned & visible. */ .cart-panel .cart-scroll, .cart-panel .cart-items, .order-panel .cart-scroll { overflow-y: auto !important; min-height: 0 !important; } .cart-panel .cart-totals, .cart-panel .pay-section, .cart-panel .cart-actions, .cart-panel .auto-print-row, .order-panel .cart-totals, .order-panel .pay-section { flex: 0 0 auto !important; } /* Product tiles: 3–4 per row depending on width (auto-fill within the panel). */ .product-grid, .pos-body .product-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 10px !important; } /* Print / PDF row buttons fit side by side. */ .btn-print, .btn-pdf { height: 40px !important; } /* ══════════════════════════════════════════════════════════════════════════ 7. DASHBOARD — 2 summary cards per row, charts full width, recent below. ══════════════════════════════════════════════════════════════════════════ */ .dashboard-grid, .bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .chart-box, .chart-card, #cashFlowCard, #pnlCard, .insights, .chart-wrap { grid-column: 1 / -1 !important; width: 100% !important; } /* ══════════════════════════════════════════════════════════════════════════ 8. TRIPS / PROJECTS — cards 2 per row, buttons aligned, filters one row. ══════════════════════════════════════════════════════════════════════════ */ .trip-grid, .tripGrid, #tripGrid, .project-grid, #projectGrid, .grid-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; } .trip-grid > *, #tripGrid > *, .project-grid > *, #projectGrid > * { height: 100% !important; } /* ── 9. Global guards: nothing overlaps, clips, or scrolls the page sideways. */ .modal-overlay > .modal, .modal.open, .modal-card { max-width: 92vw !important; } }