/* =============================================================================
   PartsFlow — phone & tablet layout layer (loaded after style.css)
   Layout only: the same buttons call the same functions; nothing here changes
   any calculation, data or server behaviour. Desktop (> 1024px) is untouched.
   ============================================================================= */

/* ---------- Tablets (≤ 1024px): compact header, scrollable tables ---------- */
@media (max-width: 1024px) {
    .top-header { padding: 0.4rem 0.75rem; gap: 0.5rem; }
    .top-header-right { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .top-header-right > * { flex: 0 0 auto; white-space: nowrap; }
    .date-preset-bar { padding: 0.35rem 0.75rem !important; }
    .table-wrapper, .table-responsive, .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .page-container { overflow-x: hidden; }
}

/* ---------- Phones (≤ 768px) ---------- */
@media (max-width: 768px) {
    :root { --pf-bottom-nav: 64px; }

    html, body { overflow-x: hidden; }

    /* Sidebar becomes a bottom bar; the sidebar element stays in the page so every tab
       button keeps working (the bottom bar simply presses the original buttons). */
    #appSidebar { display: none !important; }
    #mainWrapper, #mainWrapper.sidebar-collapsed {
        margin-left: 0 !important;
        max-width: 100vw !important;
        width: 100vw;
        padding-bottom: calc(var(--pf-bottom-nav) + env(safe-area-inset-bottom, 0px));
    }

    /* Top header: ONE compact row — the store selector and a sync dot. The Backup and Excel hubs
       are reached from the More sheet instead (same buttons, pressed for you). */
    .top-header { padding: 0.35rem 0.6rem !important; gap: 0 !important; flex-direction: column; align-items: stretch; min-height: 0; position: relative; }
    .top-header-left { width: 100%; min-width: 0; gap: 0.4rem; }
    .top-header-left .header-control-group { width: 100%; }
    .top-header-left .header-control-group label { display: none; }
    .top-header-left .header-select { width: 100%; max-width: 100%; min-width: 0; font-size: 16px; padding: 0.35rem 2.2rem 0.35rem 0.5rem; }
    .top-header-right { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); width: auto; gap: 0; overflow: visible; margin: 0 !important; pointer-events: none; }
    .top-header-right > * { flex: 0 0 auto; }
    .top-header-right #btnBackupHub, .top-header-right #btnHeaderImportModal { display: none !important; }
    /* Sync status becomes a coloured dot on the right edge of the store selector (green = live, red = off) */
    #liveSyncStatusBadge { display: block !important; width: 12px !important; height: 12px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; overflow: hidden; color: transparent !important; font-size: 1px !important; line-height: 0 !important; border: 0 !important; background: #94a3b8; box-shadow: 0 0 0 2px #fff; pointer-events: auto; }
    #liveSyncStatusBadge.badge-success { background: #16a34a !important; }
    #liveSyncStatusBadge.badge-danger, #liveSyncStatusBadge.badge-error { background: #dc2626 !important; }
    #liveSyncStatusBadge.badge-warning { background: #f59e0b !important; }
    #liveSyncStatusBadge * { display: none !important; }
    /* Screens that hide the store selector (Audit has its own): the header collapses to nothing */
    .top-header:has(> .top-header-left > .header-control-group[style*="none"]) { display: none !important; }
    /* "Enter to advance" style hints mean nothing on a touch screen */
    .page-container div:has(> kbd:first-child), .page-container span:has(> kbd:first-child) { display: none !important; }

    /* Date presets and filters: one swipeable row each, nothing wraps into a wall of buttons */
    /* nowrap: with the bar's inline flex-wrap:wrap each row grew to its full button width (wider than the phone),
       so the last buttons (This Month…Custom Range, In Stock Only) sat off-screen and could never be swiped to. */
    .date-preset-bar { padding: 0.3rem 0.6rem !important; gap: 0.3rem !important; flex-direction: column; flex-wrap: nowrap !important; align-items: stretch !important; }
    .date-preset-bar > div { min-width: 0; max-width: 100%; }
    .date-preset-bar > div > span:first-child:not(.badge), .date-preset-bar > div > div > span:first-child:not(.badge) { display: none; }
    .date-preset-bar .date-preset-btn { padding: 0.3rem 0.6rem !important; font-size: 0.78rem !important; }
    .date-preset-bar > div { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.35rem !important; padding-bottom: 2px; }
    .date-preset-bar > div::-webkit-scrollbar { display: none; }
    .date-preset-bar > div > * { flex: 0 0 auto; }
    .date-preset-bar .header-select, .date-preset-bar #btnCategoryDropdownTrigger { min-width: 0 !important; max-width: 60vw !important; }
    #categoryDropdownMenu { left: 0 !important; right: auto !important; max-width: calc(100vw - 1.5rem); }
    /* The swipeable filter strip clips anything that hangs below it, which hid the category menu on phones.
       Anchor the menu to the whole bar instead, so it drops down underneath the bar where it can be tapped. */
    .date-preset-bar { position: relative; }
    .date-preset-bar div:has(> #categoryMultiSelectContainer), #categoryMultiSelectContainer { position: static !important; }
    #categoryDropdownMenu { top: 100% !important; margin-top: 2px; }

    /* Page content: tighter gutters, nothing wider than the screen */
    .page-container { padding: 0.75rem !important; overflow-x: hidden; }
    .page-section, .page-section > * { max-width: 100%; min-width: 0; }
    .card-panel { padding: 0.85rem !important; margin-bottom: 0.85rem !important; gap: 0.6rem !important; border-radius: 12px !important; }
    .panel-header { flex-wrap: wrap; gap: 0.5rem; }
    .page-container [style*="min-width"] { min-width: 0 !important; }
    .page-container select, .page-container input:not([type="checkbox"]):not([type="radio"]), .page-container textarea, .page-container .form-control, .page-container .header-select {
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px; /* prevents the phone zooming in when a field is tapped */
    }
    .page-container .btn, .modal-box .btn { min-height: 40px; }
    .page-container .btn-sm, .modal-box .btn-sm, .page-container .table-btn, .modal-box .table-btn { min-height: 32px; }

    /* Search boxes and typeaheads take the full row instead of shrinking to their icon */
    .page-container .parts-search-box, .page-container [id$="SearchInput"], .page-container [id$="TypeaheadInput"] { width: 100% !important; }
    .page-container .parts-search-box { min-width: 0; }
    .parts-toolbar-panel > div > div:first-child, .page-container div:has(> .parts-search-box) { flex: 1 1 100% !important; }

    /* Multi-column layouts become a single column on a phone (class-based grids already do in style.css) */
    .pos-billing-grid, .grid-2col, .grid-3col, .grid-4col, .grid-filter-bar, .kpi-grid-4, .grid-kpi-autofit { grid-template-columns: minmax(0, 1fr) !important; }
    .page-container [style*="grid-template-columns"]:not(.pos-billing-doc-grid):not(.checkout-method-tabs), .modal-box [style*="grid-template-columns"]:not(.checkout-method-tabs) { grid-template-columns: minmax(0, 1fr) !important; }
    .page-container [style*="grid-template-columns"] > *, .modal-box [style*="grid-template-columns"] > *, .pos-billing-grid > * { min-width: 0; max-width: 100%; }
    /* Sub-tab strips (Transfers, Sales, Reports) swipe sideways instead of overflowing */
    .subtab-nav-group, .page-container div[style*="inline-flex"][style*="gap:6px"] { display: flex !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .subtab-nav-group > * { flex: 0 0 auto; }
    .report-segmented-group, .report-nav-bar { max-width: 100%; }
    .report-segmented-group { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.35rem; }
    .report-segmented-group .report-tab-btn { flex: 0 0 auto; white-space: nowrap; }
    #tab-sales-history > div:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #tab-sales-history > div:first-child > .sales-sub-tab-btn { flex: 0 0 auto; white-space: nowrap; }
    .checkout-method-tabs { grid-template-columns: repeat(3, 1fr) !important; }

    /* Keyboard-shortcut hints mean nothing on a touch screen */
    .page-container kbd { display: none !important; }
    /* Pill groups (sub-tabs) wrap instead of running off the screen */
    .page-container div[style*="inline-flex"][style*="border-radius:8px"] { display: flex !important; flex-wrap: wrap; width: 100%; }
    .page-container div[style*="inline-flex"][style*="border-radius:8px"] > button { flex: 1 1 auto; justify-content: center; }
    /* Long drop-downs take the row instead of forcing the row wider than the screen */
    .page-container select[style*="min-width"], #auditSessionSelect, #auditStoreSelect { width: 100% !important; flex: 1 1 100%; }
    .page-container div[style*="display:flex"] > select, .page-container div[style*="display: flex"] > select { min-width: 0 !important; max-width: 100% !important; }

    /* Tables ("Wide" style, chosen in the More sheet): keep their columns, swipe sideways to see the rest */
    .table-wrapper, .table-responsive, .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 10px; }
    .custom-table { min-width: 620px; font-size: 0.82rem; }
    .custom-table th, .custom-table td { padding: 0.5rem 0.55rem; }
    .page-container table:not(.custom-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* Audit lists (Counted Log, Reconciliation, catalog) have their own scroll boxes on desktop. On a phone a box
       inside the page cannot be swiped reliably (it looked frozen), so the list flows with the page instead. */
    #tab-physical-stock .table-responsive, #viewAuditCatalogContainer .table-responsive, #viewAuditReconContainer .table-responsive, #viewAuditPOSContainer .table-responsive { max-height: none !important; height: auto !important; overflow-y: visible !important; }

    /* ---------- Tables as cards (default on phones): every column fits the screen, no sideways swiping.
       mobile-nav.js stamps each cell with its column heading (data-label); the row becomes a small card
       with two columns of "heading / value" pairs. Same cells, same buttons, same handlers. ---------- */
    body.pf-cards table.pf-card-table { display: block; min-width: 0 !important; width: 100% !important; font-size: 0.84rem; border-collapse: separate; }
    body.pf-cards table.pf-card-table > thead, body.pf-cards table.pf-card-table > colgroup { display: none !important; }
    body.pf-cards table.pf-card-table > tbody, body.pf-cards table.pf-card-table > tfoot { display: block; width: 100%; }
    body.pf-cards table.pf-card-table > tbody > tr, body.pf-cards table.pf-card-table > tfoot > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 3px; align-items: start;
        padding: 0.55rem 0.75rem; border-bottom: 1px solid #e2e8f0; background: #fff; position: relative;
    }
    body.pf-cards table.pf-card-table > tbody > tr:nth-child(even) { background: #fafbfd; }
    body.pf-cards table.pf-card-table > tfoot > tr { background: #f1f5f9; font-weight: 700; }
    body.pf-cards table.pf-card-table td, body.pf-cards table.pf-card-table th {
        display: block; padding: 0 !important; line-height: 1.3; border: 0 !important; min-width: 0; max-width: 100%; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; background: transparent !important; box-shadow: none !important; position: static !important;
    }
    body.pf-cards table.pf-card-table td::before {
        content: attr(data-label); display: block; font-size: 0.6rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin-bottom: 1px;
    }
    body.pf-cards table.pf-card-table td[data-label=""]::before, body.pf-cards table.pf-card-table td:not([data-label])::before { display: none; }
    body.pf-cards table.pf-card-table td[data-pf-kind="primary"] { grid-column: 1 / -1; font-weight: 800; font-size: 0.95rem; color: #0f172a; }
    body.pf-cards table.pf-card-table td[data-pf-kind="primary"]::before { display: none; }
    body.pf-cards table.pf-card-table td[data-pf-kind="wide"], body.pf-cards table.pf-card-table td[data-pf-kind="actions"] { grid-column: 1 / -1; }
    body.pf-cards table.pf-card-table td[data-pf-kind="actions"] { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px !important; }
    body.pf-cards table.pf-card-table td[data-pf-kind="actions"]::before { display: none; }
    body.pf-cards table.pf-card-table td[data-pf-kind="actions"] .btn, body.pf-cards table.pf-card-table td[data-pf-kind="actions"] button { min-height: 36px; flex: 1 1 auto; }
    body.pf-cards table.pf-card-table td[data-pf-kind="check"] { position: absolute !important; top: 0.6rem; right: 0.75rem; width: auto; }
    body.pf-cards table.pf-card-table td[data-pf-kind="check"]::before { display: none; }
    body.pf-cards table.pf-card-table td[data-pf-kind="num"] { display: none; }
    body.pf-cards table.pf-card-table td[data-pf-kind="empty"] { display: none; }
    body.pf-cards table.pf-card-table td input:not([type="checkbox"]):not([type="radio"]), body.pf-cards table.pf-card-table td select { width: 100% !important; max-width: 100% !important; min-height: 38px; }
    body.pf-cards table.pf-card-table td .btn, body.pf-cards table.pf-card-table td .table-btn { min-height: 34px; }
    body.pf-cards .table-wrapper, body.pf-cards .table-responsive, body.pf-cards .table-card { overflow-x: hidden; }
    body.pf-cards .modal-box .custom-table.pf-card-table { min-width: 0 !important; }
    /* A card list needs a heading of its own: show the table's first column heading as a caption line */
    body.pf-cards table.pf-card-table[data-pf-caption]::before { content: attr(data-pf-caption); display: block; padding: 0.45rem 0.75rem; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
    /* POS basket: the list grows with the lines (no inner scroll box cutting a card in half) */
    body.pf-cards .pos-basket-scroll { max-height: none !important; min-height: 0 !important; overflow: visible !important; }
    body.pf-cards table.pf-card-table.pos-basket-table > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.pf-cards table.pf-card-table.pos-basket-table td[data-pf-kind="primary"], body.pf-cards table.pf-card-table.pos-basket-table td[data-pf-kind="actions"], body.pf-cards table.pf-card-table.pos-basket-table td[data-pf-kind="wide"] { grid-column: 1 / -1; }
    body.pf-cards table.pf-card-table.pos-basket-table td[data-label="Description"] { grid-column: 1 / -1; }
    body.pf-cards table.pf-card-table.pos-basket-table td[data-label="Stock"] { display: none; }
    /* Park / Complete Sale: two full-width rows instead of one clipped row */
    #btnParkCurrentSale, #btnCheckoutInvoice { flex: 1 1 100% !important; min-width: 0 !important; width: 100%; justify-content: center; white-space: normal; }
    #btnCheckoutInvoice { min-height: 52px; font-size: 1.05rem !important; order: -1; }
    #btnParkCurrentSale { min-height: 42px; }
    #btnParkCurrentSale ~ *, #btnCheckoutInvoice ~ * { min-width: 0; }
    #btnOpenCheckoutDrawer, #btnGenerateProforma, #btnGenerateAndPrintProforma { white-space: nowrap; }
    #btnOpenCheckoutDrawer + div { flex-wrap: wrap; justify-content: flex-end; }

    /* Sort bar above a card list (replaces the hidden column headings) */
    .pf-sort-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
    .pf-sort-bar .pf-sort-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
    .pf-sort-bar select { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: 14px !important; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
    .pf-sort-bar button { flex: 0 0 auto; min-width: 40px; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-weight: 800; color: #475569; }
    .pf-sort-bar button.active { background: var(--primary, #253C80); color: #fff; border-color: var(--primary, #253C80); }
    .table-responsive:has(> .pf-sort-bar), .table-wrapper:has(> .pf-sort-bar) { overflow: visible; }

    /* ---------- Filter rows fold away behind one "Filters" button; the search box stays ---------- */
    .pf-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0.45rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; font-weight: 700; font-size: 0.85rem; color: #0f172a; margin-bottom: 0.5rem; cursor: pointer; }
    .pf-filter-toggle .pf-filter-count { background: var(--primary, #253C80); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; }
    .pf-filter-folded > *:not(.pf-filter-keep):not(.pf-filter-toggle) { display: none !important; }
    .pf-filter-folded { display: block !important; padding-left: 0 !important; padding-right: 0 !important; }
    .pf-filter-folded > .pf-filter-toggle, .pf-filter-folded > .pf-filter-keep { margin-left: 0 !important; margin-right: 0 !important; grid-column: 1 / -1; }
    .pf-filter-folded > .pf-filter-keep { width: 100% !important; max-width: 100% !important; margin-bottom: 0.5rem; }

    /* ---------- POS on a phone: compact ribbon, catalog first ---------- */
    .pos-top-ribbon { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem !important; padding: 0.7rem 0.75rem !important; margin-bottom: 0.75rem !important; }
    .pos-top-ribbon > div { min-width: 0 !important; flex: none !important; display: block !important; }
    .pos-top-ribbon > div:first-child { grid-column: 1 / -1; }
    .pos-top-ribbon > div:nth-child(2) { grid-column: 1 / -1; }
    .pos-top-ribbon > div > div[style*="width:38px"], .pos-top-ribbon > div > div[style*="width: 38px"] { display: none !important; }
    .pos-top-ribbon .grid-form-pair-asym { display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: 0.5rem !important; }
    .pos-top-ribbon > div:nth-child(3) { grid-column: 1 / -1; }
    #posPriceModeWrapper { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    #posPriceModeWrapper > div:first-child { margin: 0 !important; text-align: left !important; }
    #posPriceToggleContainer button { min-height: 34px; padding: 4px 14px !important; }
    .btn-scanner-setup span { display: none; }
    .btn-scanner-setup { padding: 6px 8px !important; }
    #savedSalesPanel { font-size: 11px !important; max-width: 46vw; }

    /* Modals become full-height sheets with ONE scroller (the overlay itself): no scroll box inside a scroll
       box, so a swipe anywhere moves the whole pop-up — lists included. */
    .modal-overlay, .modal { align-items: flex-start !important; justify-content: center; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .modal-box, .modal-dialog, .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 0 0 14px 14px !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .modal-box .modal-body, .modal-dialog .modal-body, .modal-content .modal-body, .modal-body { max-height: none !important; height: auto !important; overflow: visible !important; }
    /* Any list box with its own fixed height (mobile-nav.js marks them) flows with the page instead */
    .pf-unbox { max-height: none !important; height: auto !important; min-height: 0 !important; overflow-y: visible !important; }
    .modal-header, .modal-footer { padding: 0.8rem 1rem !important; }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
    .modal-footer .btn { flex: 1 1 45%; }
    .modal-box .table-wrapper, .modal-box .table-responsive { overflow-x: auto; }
    .modal-box .custom-table, .modal-dialog .custom-table, .modal-content .custom-table { min-width: 560px; }
    body.pf-cards .modal-dialog .custom-table.pf-card-table, body.pf-cards .modal-content .custom-table.pf-card-table { min-width: 0 !important; }
    .modal-box .grid-2col, .modal-box .grid-3col, .modal-box .grid-form-pair { grid-template-columns: 1fr !important; }
    .modal-box [style*="min-width"] { min-width: 0 !important; }
    .modal-box select, .modal-box input:not([type="checkbox"]):not([type="radio"]), .modal-box textarea { max-width: 100% !important; box-sizing: border-box; font-size: 16px; }

    /* Floating panels sit above the bottom bar */
    #savedSalesPanel { bottom: calc(var(--pf-bottom-nav) + 6px + env(safe-area-inset-bottom, 0px)) !important; left: auto !important; right: 8px !important; transform: none !important; max-width: calc(100vw - 1rem); font-size: 12px !important; }
    #savedSalesPanel .saved-sales-toggle { padding: 6px 10px !important; }
    /* Report header: type strip on one row, controls below */
    .report-nav-bar { flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
    .report-nav-bar > * { max-width: 100%; }
    .toast-container { bottom: calc(var(--pf-bottom-nav) + 8px) !important; }

    /* ---------- Bottom navigation bar ---------- */
    #pfBottomNav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10002;
        display: flex; align-items: stretch;
        height: calc(var(--pf-bottom-nav) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff; border-top: 1px solid var(--border, #e2e8f0);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    }
    #pfBottomNav button {
        flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: #64748b; font: 700 0.68rem/1.1 var(--font-main, system-ui, sans-serif); padding: 6px 2px;
        -webkit-tap-highlight-color: transparent;
    }
    #pfBottomNav button svg { width: 22px; height: 22px; }
    #pfBottomNav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #pfBottomNav button.active { color: var(--primary, #253C80); }
    #pfBottomNav button.active svg { stroke: var(--primary, #253C80); }
    #pfBottomNav button .pf-nav-dot { position: absolute; }

    /* "More" sheet with every screen this account can open */
    #pfMoreSheet { position: fixed; inset: 0; z-index: 10001; background: rgba(15, 23, 42, 0.45); display: none; }
    #pfMoreSheet.open { display: block; }
    #pfMoreSheet .pf-sheet {
        position: absolute; left: 0; right: 0; bottom: calc(var(--pf-bottom-nav) + env(safe-area-inset-bottom, 0px));
        background: #fff; border-radius: 16px 16px 0 0; padding: 0.75rem 0.75rem 1rem; max-height: 70vh; overflow-y: auto;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
    }
    #pfMoreSheet .pf-sheet-title { font-weight: 800; font-size: 0.85rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.5rem 0.6rem; }
    #pfMoreSheet .pf-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    #pfMoreSheet .pf-sheet-grid button {
        border: 1px solid var(--border, #e2e8f0); background: #f8fafc; border-radius: 12px; padding: 0.7rem 0.4rem; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; gap: 6px; color: #0f172a; font: 700 0.75rem/1.2 var(--font-main, system-ui, sans-serif);
    }
    #pfMoreSheet .pf-sheet-grid button.active { background: #eef2ff; border-color: #c7d2fe; color: var(--primary, #253C80); }
    #pfMoreSheet .pf-sheet-grid button svg { width: 22px; height: 22px; }
    #pfMoreSheet .pf-sheet-user { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; padding: 0.6rem 0.75rem; background: #f1f5f9; border-radius: 12px; font-size: 0.8rem; }
    #pfMoreSheet .pf-sheet-user strong { display: block; font-size: 0.85rem; }
    #pfMoreSheet .pf-sheet-user button { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 0.4rem 0.7rem; font-weight: 700; font-size: 0.78rem; cursor: pointer; }
}

/* Phones held sideways: slimmer bar */
@media (max-width: 768px) and (max-height: 480px) {
    :root { --pf-bottom-nav: 48px; }
    #pfBottomNav button span { display: none; }
}

/* =============================================================================
   Phone UI audit fixes (25 Sep 2026) — found by an automated pass over every screen
   and pop-up at 360px and 412px wide. Layout only; no behaviour changes.
   ============================================================================= */
@media (max-width: 768px) {
    /* 1. Money figures never run out of their card: they shrink with the screen, and wrap as a last resort */
    .kpi-value, .text-kpi-headline { font-size: clamp(1.3rem, 7vw, 1.9rem) !important; max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
    .kpi-value .kpi-number, .kpi-value .currency-val { font-size: inherit !important; overflow-wrap: anywhere; }
    #dashCashInHand { font-size: clamp(1.05rem, 6vw, 1.35rem) !important; overflow-wrap: anywhere; }
    #dashReceivableBadge { display: block; font-family: inherit !important; line-height: 1.35; }
    .kpi-meta-row { flex-wrap: wrap; column-gap: 0.5rem; row-gap: 1px; }
    .kpi-meta-row > .kpi-meta-label { min-width: 0; }
    .kpi-meta-row > .kpi-meta-val { margin-left: auto; min-width: 0; max-width: 100%; text-align: right; overflow-wrap: anywhere; }
    .kpi-meta-pills { flex-wrap: wrap !important; overflow: visible !important; }
    .kpi-meta-pills > .kpi-pill { white-space: normal !important; max-width: 100%; overflow-wrap: anywhere; }
    .kpi-meta-row a.kpi-meta-val { display: inline-block; padding: 6px 0; }

    /* 2. Heading rows (title on the left, badge or buttons on the right) wrap instead of pushing past the screen */
    .page-container div[style*="justify-content:space-between"], .page-container div[style*="justify-content: space-between"],
    .modal-box div[style*="justify-content:space-between"], .modal-box div[style*="justify-content: space-between"] { flex-wrap: wrap; row-gap: 0.4rem; }
    .page-container div[style*="justify-content:space-between"] > *, .page-container div[style*="justify-content: space-between"] > *,
    .modal-box div[style*="justify-content:space-between"] > *, .modal-box div[style*="justify-content: space-between"] > * { min-width: 0; max-width: 100%; }
    .page-container .badge, .modal-box .badge { white-space: normal; max-width: 100%; }

    /* 3. Button groups at the top of a screen: every row filled edge to edge, no ragged widths */
    .panel-right, .parts-nav-header > div, .parts-nav-header > div > div { width: 100%; }
    .panel-right > .btn, .panel-right > button, .parts-nav-header .btn, .parts-nav-header > div > button { flex: 1 1 auto; justify-content: center; }
    .page-container div[style*="flex-wrap:wrap"] > .btn, .page-container div[style*="flex-wrap: wrap"] > .btn { flex: 1 1 auto; justify-content: center; }
    #btnAddPartModal:empty { display: none !important; }

    /* 4. Segmented choices (In Stock / All / Low / Out, Cost / Retail) big enough for a thumb, laid out as a grid */
    #partsStockStatusGroup { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .btn-segmented, #partsStockStatusGroup > button, [id^="btnValMode"] { min-height: 38px !important; }
    .btn-scanner-setup { min-height: 38px !important; min-width: 42px; }
    #auditSessionSelect, #auditNotesInput, #auditStoreSelect { min-height: 42px !important; }

    /* 5. The "No pending sales" pill covered buttons and figures on every screen. It stays hidden while there
          is nothing to report (the green dot at the top already shows the connection); it reappears as soon as
          a bill is waiting, syncing or needs review. */
    #savedSalesPanel[class=""]:has(> .saved-sales-toggle[aria-expanded="false"]),
    #savedSalesPanel:not([class]):has(> .saved-sales-toggle[aria-expanded="false"]) { display: none !important; }
}
@media (max-width: 768px) {
    /* 6. "overflow-x: hidden" still lets the page be pushed sideways when a field gets focus or the app scrolls
          to an element, which left whole screens shifted off the left edge (seen on Audit). "clip" cannot scroll. */
    html, body, .page-container { overflow-x: clip !important; }

    /* 7. Rows of buttons wrap onto a new line instead of running past the screen (Racks, Price approvals, Audit) */
    .page-container div[style*="display:flex"]:has(> .btn):not([style*="nowrap"]),
    .page-container div[style*="display: flex"]:has(> .btn):not([style*="nowrap"]),
    .modal-box div[style*="display:flex"]:has(> .btn):not([style*="nowrap"]) { flex-wrap: wrap; }
    .page-container div[style*="display:flex"]:has(> .btn) > .btn, .page-container div[style*="display: flex"]:has(> .btn) > .btn { min-width: 0; max-width: 100%; white-space: normal; }
    #btnSubmitAuditCount { min-width: 0 !important; white-space: normal; }

    /* 8. Keyboard shortcut hints (F6, F10, Alt+N) mean nothing on a phone */
    .pf-key { display: none !important; }

    /* 9. Folded filter bars (Sales history) use the full card width instead of a narrow centred strip */
    .pf-filter-folded { width: 100% !important; max-width: 100% !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; }

    /* 10. While a pop-up is open the bottom bar steps aside, so the pop-up's own Save / Cancel buttons are never under it */
    body:has(.modal-overlay.active) #pfBottomNav, body:has([id^="modal"].active) #pfBottomNav,
    body:has(.modal-overlay.active) #savedSalesPanel, body:has([id^="modal"].active) #savedSalesPanel { display: none !important; }

    /* 11. A little air under the last row of every screen, above the bottom bar */
    .page-section { padding-bottom: 1rem; }
}
@media (max-width: 768px) {
    /* 12. Sales screen: the two invoice types side by side, and the toolbar buttons fill their row */
    #tab-sales-history > div:first-child { flex-wrap: nowrap !important; }
    #tab-sales-history > div:first-child > .sales-sub-tab-btn { flex: 1 1 0 !important; min-width: 0; white-space: normal !important; text-align: center; justify-content: center; }
    .sales-history-toolbar .btn, .sales-history-toolbar button:not(.pf-filter-toggle) { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 768px) {
    /* 13. Fields and small buttons inside pop-ups are thumb-sized too */
    .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .modal-box select,
    .modal-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .modal-dialog select { min-height: 40px; }
    .password-toggle-btn { min-width: 36px; min-height: 36px; }
    #pfMoreSheet .pf-sheet-user button { min-height: 36px; }
    /* 14. The last row of a long list (page numbers) clears the bottom bar */
    #mainWrapper, #mainWrapper.sidebar-collapsed { padding-bottom: calc(var(--pf-bottom-nav) + 28px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 768px) {
    /* 15. Part search suggestions (Billing, Transfers, Purchases, Audit) stay inside the screen */
    .typeahead-popup { min-width: 0 !important; max-width: calc(100vw - 1.5rem) !important; box-sizing: border-box; }
    /* 16. Quick sell: title on its own line, tiles two per row */
    #posQuickSellBar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #posQuickSellBar > :not(.pos-quick-tile) { grid-column: 1 / -1; }
    #posQuickSellBar > .pos-quick-tile { min-width: 0; width: auto; max-width: none; }
    /* 17. Row buttons in card lists (Pay, History, Bill, Modify, Return) wrap instead of the last ones being cut */
    .table-actions-group { flex-wrap: wrap !important; row-gap: 6px; }
    /* 18. Custom Range dates drop down under the filter bar instead of appearing off-screen at the end of the swipe row */
    #customDateInputsGroup { position: absolute !important; left: 0.6rem; right: 0.6rem; top: 100%; z-index: 60; flex-wrap: wrap; gap: 0.5rem !important; padding: 0.6rem !important; background: #fff !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15); }
    #customDateInputsGroup input { width: auto !important; flex: 1 1 100%; min-width: 0; min-height: 42px; font-size: 16px !important; }
    #customDateInputsGroup button { min-height: 42px; flex: 1 1 100%; }
    /* 19. Category menu buttons (All / Clear) thumb-sized */
    #btnSelectAllCategories, #btnClearAllCategories { min-height: 34px; padding: 4px 12px; }
}
@media (max-width: 768px) {
    /* 20. Close (×) on notification toasts is big enough to hit */
    .toast-close { min-width: 34px; min-height: 34px; }
}
/* 21. Loading screen (all screen sizes): it covers the whole screen even while a phone's address bar slides away,
       and nothing behind it can scroll or show through (bottom bar, pending-sales pill) until the app is ready. */
#appBootstrapLoadingScreen { height: 100vh; height: 100lvh; bottom: auto !important; overscroll-behavior: contain; touch-action: none; }
html.pf-booting, html.pf-booting body { overflow: hidden !important; overscroll-behavior: none; }
html.pf-booting #pfBottomNav, html.pf-booting #savedSalesPanel, html.pf-booting #pfMoreSheet { display: none !important; }