/* ═══════════════════════════════════════════════════════════════════ mobile.css — Invoice screen (screen-view) mobile layout Targets: CSS classes written by openView() in index_part1.js i.e. .detail-meta .inv-items .totals-section .order-detail-actions IMPORTANT: This file requires the following tag in : Without it, the @media max-width query will NOT fire on real phones. ═══════════════════════════════════════════════════════════════════ */ /* Use both max-width AND max-device-width so rules fire whether or not the viewport meta tag is correct (belt-and-suspenders for real phones) */ @media (max-width: 640px), (max-device-width: 640px) { /* ── Topbar: use company accent colour (not hardcoded navy) ── */ #screen-view > .topbar { background: var(--accent) !important; /* FIX: was #2d2f4e */ border-color: transparent !important; border-radius: 0 !important; } #screen-view > .topbar .t { color: #fff !important; } #screen-view > .topbar .back-btn { color: rgba(255,255,255,0.75) !important; } /* FIX: was #b0b3cc */ #screen-view > .topbar .share-btn { color: rgba(255,255,255,0.75) !important; /* FIX: was #b0b3cc */ border-color: rgba(255,255,255,0.25) !important; background: rgba(255,255,255,0.12) !important; } /* ── body-wrap: no card on mobile ── */ #screen-view .body-wrap { border-radius: 0 !important; border-left: none !important; border-right: none !important; box-shadow: none !important; } /* ── Trail bar ── */ #screen-view .trail-bar { background: #eeeef6 !important; border-bottom: 1px solid #dddde8 !important; font-size: 12px !important; padding: 8px 14px !important; } /* ── detail-body wrapper ── */ #screen-view .detail-body { padding: 0 !important; background: #f2f2f6 !important; } /* ── inv-items column widths (override desktop class widths) ── */ table.inv-items th.col-num { width: 36px !important; } /* FIX: was 22px, splits on row 10+ */ /* Qty narrowed: "1 bx" fits easily at 12px */ table.inv-items th.col-qty { width: 48px !important; } /* Rate widened: ₹8,500.00 at 12px needs ~74px (content + padding) */ table.inv-items th.col-rate { width: 78px !important; } table.inv-items th.col-tax { width: 50px !important; } /* Amount same width as rate for consistency */ table.inv-items th.col-amt { width: 78px !important; } /* ── Bill To + doc info row ── */ .detail-meta { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; background: #fff !important; padding: 14px 16px !important; border-bottom: 1px solid #e5e5ea !important; margin-bottom: 0 !important; } .bill { color: #333 !important; font-size: 13px !important; line-height: 1.55 !important; } .bill strong { color: #111 !important; font-size: 15px !important; font-weight: 800 !important; display: block !important; letter-spacing: -0.2px !important; margin-bottom: 1px !important; } .inv-label { font-size: 10px !important; color: #888 !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; opacity: 0.75 !important; } .inv-num { font-size: 18px !important; font-weight: 800 !important; color: var(--accent) !important; letter-spacing: -0.3px !important; margin: 2px 0 !important; } .dates { text-align: right !important; font-size: 12px !important; color: #888 !important; line-height: 1.8 !important; margin-top: 6px !important; } .dates span { color: #222 !important; font-weight: 700 !important; } /* ── Items table ── */ table.inv-items { width: 100% !important; font-size: 13px !important; border-collapse: collapse !important; table-layout: fixed !important; margin-top: 0 !important; background: #fff !important; } table.inv-items thead tr { background: var(--accent) !important; /* FIX: was #2d2f4e */ } table.inv-items thead th { padding: 9px 8px !important; font-size: 11px !important; font-weight: 700 !important; color: #fff !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: none !important; text-align: left !important; } table.inv-items thead th:nth-child(1) { width: 32px !important; padding-left: 10px !important; } /* FIX: match col-num */ table.inv-items thead th:nth-child(3), table.inv-items thead th:nth-child(4), table.inv-items thead th:nth-child(5) { text-align: right !important; white-space: nowrap !important; padding-left: 4px !important; padding-right: 5px !important; } table.inv-items thead th:nth-child(3) { width: 48px !important; } table.inv-items thead th:nth-child(4) { width: 78px !important; } table.inv-items thead th:nth-child(5) { width: 78px !important; } table.inv-items tbody td { padding: 10px 8px !important; font-size: 13px !important; border-bottom: 1px solid #f0f0f5 !important; vertical-align: middle !important; color: #222 !important; word-break: break-word !important; } table.inv-items tbody td:nth-child(1) { padding-left: 10px !important; color: #999 !important; font-size: 12px !important; } table.inv-items tbody td:nth-child(3), table.inv-items tbody td:nth-child(4), table.inv-items tbody td:nth-child(5) { text-align: right !important; white-space: nowrap !important; font-size: 12px !important; padding-left: 4px !important; padding-right: 5px !important; } table.inv-items tbody td:nth-child(5) { font-weight: 700 !important; } table.inv-items tbody tr:last-child td { border-bottom: none !important; } /* ── Totals section ── */ .totals-section { background: #fff !important; border-top: 1px solid #e5e5ea !important; margin-top: 0 !important; padding: 0 !important; } .totals-section table { width: 100% !important; font-size: 13px !important; border-collapse: collapse !important; } .totals-section td { padding: 6px 14px !important; font-size: 13px !important; } .totals-section td:first-child { text-align: left !important; color: #666 !important; } .totals-section td:last-child { text-align: right !important; font-weight: 700 !important; } .totals-section tr.grand td { background: var(--accent) !important; /* FIX: was #2d2f4e */ color: #fff !important; font-size: 15px !important; font-weight: 900 !important; padding: 13px 14px !important; border-radius: 0 !important; } /* ── Three-dot button: enlarge touch target to 44px minimum ── */ .card-three-dot-btn { width: 44px !important; height: 44px !important; border-radius: 10px !important; touch-action: manipulation !important; /* kills 300ms tap delay */ } /* card-dot-popup: use fixed positioning (already set), ensure it's on top */ .card-dot-popup { position: fixed !important; z-index: 9999 !important; } /* ── Action buttons row ── */ .order-detail-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; padding: 14px 16px !important; background: #fff !important; border-top: 1px solid #e5e5ea !important; margin-top: 0 !important; } .order-detail-actions .btn-outline, .order-detail-actions .btn-teal, .order-detail-actions .btn-status { flex: 1 !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; padding: 11px 10px !important; font-size: 13px !important; border-radius: 10px !important; } } /* end @media 640px */