/* ===========================================================
   TaxNest — Universal Mobile / PWA Polish (v1)
   Loaded by every layout: app, guest, pos-app, fbr-pos-app,
   admin-app, franchise-app. Designed to be additive only —
   does not override desktop styles, only enhances <= 1024px
   and PWA standalone mode (notch / home-bar safe-area).
   =========================================================== */

/* ----- 1. Root: smooth touch + iOS rubber-band control ----- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
    touch-action: manipulation; /* removes 300ms double-tap delay on legacy iOS */
}

/* ----- 2. iOS Safe-Area (notch + home indicator) ----- */
/* Apply to PWA standalone mode + always to app body so phones with notches
   never hide content behind status bar / home bar. */
@supports (padding-top: env(safe-area-inset-top)) {
    /* Sticky/fixed top headers — pad inside, don't move whole layout */
    .safe-top, header.sticky, .topnav-bar, .admin-header-border,
    nav.fixed.top-0 {
        padding-top: max(env(safe-area-inset-top), 0px);
    }
    /* Bottom drawers, fixed footers, action bars */
    .safe-bottom, .pos-bottom-bar, .fixed.bottom-0,
    .bottom-action-bar {
        padding-bottom: max(env(safe-area-inset-bottom), 12px);
    }
    /* Side safe areas for landscape on notched devices */
    .safe-x { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
/* PWA standalone mode — fully cover the screen, no browser chrome */
@media (display-mode: standalone), (display-mode: fullscreen) {
    html, body { height: 100vh; height: 100dvh; }
    /* Disable text selection on chrome elements (iOS PWA polish) */
    .topnav-bar, header.sticky, .admin-sidebar, nav#sidebarDrawer {
        -webkit-user-select: none; user-select: none;
    }
}

/* ----- 3. iOS prevent zoom on input focus -----
   iOS Safari zooms when input font-size < 16px.
   We force inputs to >= 16px on small screens only.
   IMPORTANT: respect explicit Tailwind arbitrary text sizes (text-[10px] / text-[11px] /
   text-[12px]) used in dense POS cart rows — those stay tiny by design. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([class*="text-["]):not(.dense-input),
    select:not([class*="text-["]):not(.dense-input),
    textarea:not([class*="text-["]):not(.dense-input),
    .premium-input:not(.dense-input) {
        font-size: 16px !important;
        line-height: 1.4;
    }
    /* Tailwind `text-xs/text-sm` inputs would shrink — bump them on mobile too,
       but again skip explicit arbitrary sizes + .dense-input opt-out. */
    input.text-xs:not([class*="text-["]), input.text-sm:not([class*="text-["]),
    select.text-xs:not([class*="text-["]), select.text-sm:not([class*="text-["]),
    textarea.text-xs:not([class*="text-["]), textarea.text-sm:not([class*="text-["]) {
        font-size: 16px !important;
    }
}

/* ----- 3b. Dense input opt-out (POS cart Notes / Discount fields) -----
   Explicit class for dense table-cell inputs that intentionally stay tiny.
   Pair with class="dense-input text-[10px]" or class="dense-input text-[11px]". */
.dense-input { font-size: inherit !important; }

/* === POS Cart Row Mobile Optimization (Phase 3) === */
/* On phones, the cart-item row is too cramped (name + qty stepper + total + delete = ~250px on 360px screens).
   Stack the bottom (notes/discount toggle) row already exists; we tighten the top row controls. */
@media (max-width: 480px) {
    .cart-item .flex.items-center.gap-2\.5 > .flex-1 {
        min-width: 0;
    }
    .cart-item input[data-qty-input] {
        width: 3rem !important;
        height: 2.25rem !important;
        font-size: 0.95rem !important;
    }
    .cart-item .flex.items-center.gap-0\.5.bg-gray-100 button,
    .cart-item .flex.items-center.gap-0\.5.dark\:bg-gray-800 button {
        width: 2rem !important;
        height: 2.25rem !important;
        min-width: 2rem !important;
        min-height: 2.25rem !important;
    }
    .cart-item .text-right.min-w-\[60px\] {
        min-width: 50px !important;
    }
    .cart-item .text-right.min-w-\[60px\] p {
        font-size: 0.75rem !important;
    }
}
@media (max-width: 360px) {
    /* Ultra-narrow phones (iPhone SE 1st gen, old Androids): stack qty stepper to its own row */
    .cart-item .flex.items-center.gap-2\.5 {
        flex-wrap: wrap !important;
    }
    .cart-item .flex.items-center.gap-2\.5 > .flex-1 {
        flex-basis: 100% !important;
    }
}

/* ----- 3c. Hide desktop floating "Edit Cart" button on phones -----
   Inline-styled fixed button with right:400px would push off-screen on
   <400px wide phones. Mobile users use the dedicated bottom Cart bar instead. */
@media (max-width: 767px) {
    .pos-edit-cart-floating-btn { display: none !important; }
}

/* ----- 4. Touch targets — min 40x40 on all clickables ----- */
@media (max-width: 768px) {
    button, a.btn, .btn, .nav-pill, [role="button"], .sidebar-link {
        min-height: 40px;
    }
    /* Tiny icon buttons — keep them touch-safe */
    button.p-1, button.p-1\.5, a.p-1, a.p-1\.5 {
        min-width: 36px; min-height: 36px;
    }
    /* Form labels easier to tap */
    label { padding: 4px 0; }
    /* Bigger tap area for checkboxes & radios */
    input[type="checkbox"], input[type="radio"] {
        min-width: 18px; min-height: 18px;
    }
}

/* ----- 5. Responsive tables — wrap long tables in horizontal scroller ----- */
/* Add class .table-responsive on wrapper, OR just wrap any <table> */
.table-responsive, .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    border-radius: 12px;
}
.table-responsive table, .table-wrap table { min-width: 600px; }

@media (max-width: 768px) {
    /* Universal table mobile mode — anything in main content gets a soft horizontal scroll
       UNLESS it has .table-cards (those use the v2 card transformer in section 22). */
    main table:not(.table-static):not(.table-cards), .premium-table:not(.table-cards) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* But preserve visual table semantics inside the scroll */
    main table:not(.table-static):not(.table-cards) > tbody,
    main table:not(.table-static):not(.table-cards) > thead,
    main table:not(.table-static):not(.table-cards) > tfoot {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    main table:not(.table-static):not(.table-cards) > tbody > tr,
    main table:not(.table-static):not(.table-cards) > thead > tr,
    main table:not(.table-static):not(.table-cards) > tfoot > tr {
        display: table-row;
    }
    main table:not(.table-static):not(.table-cards) > * > tr > th,
    main table:not(.table-static):not(.table-cards) > * > tr > td {
        display: table-cell;
    }
    /* Reduce padding inside dense tables on mobile */
    .premium-table:not(.table-cards) th, .premium-table:not(.table-cards) td { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
}

/* ----- 6. Mobile-friendly modals / dialogs ----- */
@media (max-width: 768px) {
    /* Common modal patterns — keep them inside viewport, scrollable */
    .modal, [role="dialog"], .dialog-card,
    .max-w-md.mx-auto, .max-w-lg.mx-auto, .max-w-xl.mx-auto, .max-w-2xl.mx-auto {
        max-width: 95vw !important;
    }
    /* Bottom-sheet style for big forms — opt-in via .sheet-mobile */
    .sheet-mobile {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        max-height: 92vh !important;
        border-radius: 18px 18px 0 0 !important;
        animation: sheetUp 0.22s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ----- 7. Mobile typography — prevent giant headlines, retain hierarchy ----- */
@media (max-width: 640px) {
    h1, .text-4xl, .text-5xl { font-size: 1.75rem !important; line-height: 2.05rem !important; }
    h2, .text-3xl { font-size: 1.4rem !important; line-height: 1.7rem !important; }
    h3, .text-2xl { font-size: 1.2rem !important; line-height: 1.5rem !important; }
    .text-xl { font-size: 1.05rem !important; line-height: 1.4rem !important; }
}

/* ----- 8. Common layout fixes ----- */
@media (max-width: 768px) {
    /* Long horizontal pill bars / tab strips — give them horizontal scroll instead of wrap */
    .tabs-scroll, .pill-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .tabs-scroll::-webkit-scrollbar, .pill-strip::-webkit-scrollbar { display: none; }

    /* Reduce default page paddings on tiny screens */
    main.flex-1.overflow-y-auto { padding: 1rem 0.875rem; }

    /* Stack flex utility rows vertically on small phones if they were forced row */
    .stack-mobile { flex-direction: column !important; align-items: stretch !important; }
    .stack-mobile > * { width: 100% !important; }

    /* Hide non-essential decorative elements on phones */
    .hide-mobile, .desktop-only { display: none !important; }
    /* Force-show on mobile only */
    .mobile-only { display: block !important; }
    .mobile-only.inline { display: inline !important; }
    .mobile-only.flex   { display: flex !important; }
    .mobile-only.grid   { display: grid !important; }
}
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}

/* ----- 9. Sticky bottom action bar (used by POS carts, forms) ----- */
.bottom-action-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid rgba(229,231,235,0.9);
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 30;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.dark .bottom-action-bar {
    background: #0f172a;
    border-top-color: rgba(55,65,81,0.7);
}

/* ----- 10. POS cart polish on mobile ----- */
@media (max-width: 768px) {
    /* Two-column POS pages (product grid + cart) → stack vertically */
    .pos-grid-cart { display: block !important; }
    .pos-grid-cart > * { width: 100% !important; max-width: 100% !important; }

    /* Pin cart to bottom drawer with a toggle handle */
    .cart-drawer-mobile {
        position: fixed; left: 0; right: 0; bottom: 0;
        max-height: 70vh; background: white;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
        transform: translateY(calc(100% - 64px));
        transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
        z-index: 40;
        overflow-y: auto;
    }
    .cart-drawer-mobile.is-open { transform: translateY(0); }
    .dark .cart-drawer-mobile { background: #0f172a; }
}

/* ----- 11. Sidebar drawer width on small phones ----- */
@media (max-width: 480px) {
    nav#sidebarDrawer, aside.fixed.lg\:static {
        width: 88vw !important;
        max-width: 320px;
    }
}

/* ----- 12. Better mobile scrollbars (slim, unobtrusive) ----- */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.45); border-radius: 4px; }
}

/* ----- 13. Form field spacing on mobile -----
   Conservative auto-collapse for non-POS layouts (DI, Admin, FBR POS, Franchise, Guest):
   on phones (<640px) any raw grid-cols-2/3/4 collapses to a single column. Many of those
   layouts implicitly depend on this behaviour, so we leave it untouched. */
@media (max-width: 640px) {
    .grid.grid-cols-2:not(.grid-cols-2-keep), .grid.grid-cols-3:not(.grid-cols-3-keep),
    .grid.grid-cols-4:not(.grid-cols-4-keep) {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    /* Restore 2-col when explicitly opted-in */
    .grid.grid-cols-2.grid-cols-2-keep { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ----- 13b. POS layout opts OUT of the aggressive global collapse -----
   POS pages were designed mobile-first with explicit grid-cols-2/3/4 intent
   (KPI tiles, action button grids, payment tiles). The body in
   resources/views/layouts/pos-app.blade.php carries `.pos-layout-root`, so this rule
   only re-establishes developer intent INSIDE POS. Other layouts are untouched. */
@media (max-width: 640px) {
    .pos-layout-root .grid.grid-cols-2:not(.grid-cols-keep),
    .pos-layout-root .grid.grid-cols-3:not(.grid-cols-keep),
    .pos-layout-root .grid.grid-cols-4:not(.grid-cols-keep) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}
@media (max-width: 360px) {
    /* Ultra-narrow phones (iPhone SE 1st gen, etc.): collapse 4-col to single column inside POS */
    .pos-layout-root .grid.grid-cols-4:not(.grid-cols-keep) {
        grid-template-columns: 1fr !important;
    }
}

/* ----- 14. KPI / stat card grids — 2-col on phones, 4-col on desktop ----- */
@media (max-width: 480px) {
    .kpi-grid, .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}

/* ----- 15. Image sizing safety ----- */
img, video, iframe { max-width: 100%; height: auto; }

/* ----- 16. Better mobile button row spacing ----- */
@media (max-width: 640px) {
    .btn-row, .actions-row {
        display: flex; flex-wrap: wrap; gap: 0.5rem;
    }
    .btn-row > *, .actions-row > * { flex: 1 1 auto; min-width: 0; }
}

/* ----- 17. Prevent horizontal page scroll (the #1 mobile-app sin) ----- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ----- 18. Accessible focus rings on touch devices ----- */
@media (hover: none) {
    *:focus-visible {
        outline: 2px solid #10b981;
        outline-offset: 2px;
    }
}

/* ----- 19. Loading / disabled state legibility on mobile ----- */
@media (max-width: 768px) {
    .btn-loading::after { width: 16px; height: 16px; margin-top: -8px; }
}

/* ----- 20. POS receipt preview / PDF iframes — full width on mobile ----- */
@media (max-width: 768px) {
    iframe.receipt-preview, iframe.pdf-preview {
        width: 100% !important;
        min-height: 60vh;
    }
}

/* ----- 21. Print-mode: untouched, browser handles ----- */
@media print {
    .hide-print { display: none !important; }
}

/* ==========================================================================
   v2.0 — UNIVERSAL MOBILE COMPATIBILITY LAYER (May 2026)
   Adds: real table→card transformer, full-screen mobile modals,
   container queries, mobile drawer system. All opt-in via class.
   ========================================================================== */

/* ----- 22. TABLE → CARD TRANSFORMER (.table-cards opt-in) -----
   Applies to: <table class="... table-cards"> wrapping any tabular data.
   On mobile (<768px), each <tr> stacks vertically as a card with cell labels
   pulled from data-label="..." attribute on each <td>. Falls back to
   horizontal-scroll behavior if data-label missing. */
@media (max-width: 768px) {
    /* SMART card mode — only activates when the table actually uses data-label
       on its cells. Tables without data-label fall through to safe
       horizontal-scroll mode (preserves v1 behavior, no regression). */

    /* === LEGACY-BROWSER SAFETY: where :has() is unsupported (Safari <15.4,
       old Android WebView <105), force ALL .table-cards into horizontal-scroll
       mode so nothing breaks visually. Modern browsers ignore this block. === */
    @supports not selector(:has(*)) {
        table.table-cards {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
        }
        table.table-cards > thead,
        table.table-cards > tbody,
        table.table-cards > tfoot {
            display: table; width: 100%; min-width: 600px;
        }
        table.table-cards > * > tr { display: table-row; }
        table.table-cards > * > tr > th,
        table.table-cards > * > tr > td { display: table-cell; }
    }

    /* === FALLBACK: tables WITHOUT data-label → horizontal scroll (v1 safe) === */
    table.table-cards:not(:has(td[data-label])) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.table-cards:not(:has(td[data-label])) > thead,
    table.table-cards:not(:has(td[data-label])) > tbody,
    table.table-cards:not(:has(td[data-label])) > tfoot {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    table.table-cards:not(:has(td[data-label])) > * > tr { display: table-row; }
    table.table-cards:not(:has(td[data-label])) > * > tr > th,
    table.table-cards:not(:has(td[data-label])) > * > tr > td { display: table-cell; }

    /* === TRUE CARD MODE: only when ≥1 td[data-label] exists === */
    table.table-cards:has(td[data-label]) { display: block; width: 100%; }
    table.table-cards:has(td[data-label]) thead { display: none; }
    table.table-cards:has(td[data-label]) tbody { display: block; }
    table.table-cards:has(td[data-label]) tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        background: white;
        border: 1px solid rgba(229,231,235,0.9);
        border-radius: 12px;
        padding: 0.75rem 0.875rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        position: relative;
    }
    .dark table.table-cards:has(td[data-label]) tbody tr {
        background: rgba(17,24,39,0.7);
        border-color: rgba(55,65,81,0.6);
    }
    /* Use plain display:flex (no !important) so Tailwind .hidden classes still work */
    table.table-cards:has(td[data-label]) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border: none;
        white-space: normal;
        text-align: right;
        font-size: 0.825rem;
        min-height: 28px;
    }
    /* Honor Tailwind responsive-hide utilities — never override them */
    table.table-cards:has(td[data-label]) tbody td.hidden { display: none; }
    table.table-cards:has(td[data-label]) tbody td:first-child {
        border-bottom: 1px solid rgba(229,231,235,0.7);
        padding-bottom: 0.55rem;
        margin-bottom: 0.35rem;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .dark table.table-cards:has(td[data-label]) tbody td:first-child {
        border-bottom-color: rgba(55,65,81,0.5);
    }
    table.table-cards:has(td[data-label]) tbody td:first-child::before { display: none; }
    table.table-cards:has(td[data-label]) tbody td::before {
        content: attr(data-label);
        font-weight: 500;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        flex-shrink: 0;
    }
    .dark table.table-cards:has(td[data-label]) tbody td::before { color: #94a3b8; }
    table.table-cards:has(td[data-label]) tbody td:not([data-label])::before { display: none; }
    /* Action cells get full width row at bottom */
    table.table-cards:has(td[data-label]) tbody td.actions-cell,
    table.table-cards:has(td[data-label]) tbody td:last-child:has(button, a) {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 0.55rem;
        margin-top: 0.35rem;
        border-top: 1px solid rgba(229,231,235,0.7);
    }
    .dark table.table-cards:has(td[data-label]) tbody td.actions-cell,
    .dark table.table-cards:has(td[data-label]) tbody td:last-child:has(button, a) {
        border-top-color: rgba(55,65,81,0.5);
    }
    /* Empty state row */
    table.table-cards:has(td[data-label]) tbody tr:has(td[colspan]) {
        text-align: center;
        padding: 1.5rem 1rem;
    }
    table.table-cards:has(td[data-label]) tbody tr:has(td[colspan]) td {
        display: block;
        text-align: center;
    }
}

/* ----- 23. UNIVERSAL MODAL MOBILE TAKEOVER -----
   Any element with .modal-mobile-fullscreen class becomes a full-screen
   sheet on phones (<640px), keeping desktop styling intact. */
@media (max-width: 640px) {
    .modal-mobile-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Auto-apply to common modal patterns inside dialog containers */
    [role="dialog"] > .bg-white.rounded-xl,
    [role="dialog"] > .bg-white.rounded-2xl,
    .modal-overlay > .bg-white,
    .modal-overlay > .dark\:bg-gray-900 {
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
    }
}

/* ----- 24. UNIVERSAL CONTAINER PADDING (consistent gutters) ----- */
@media (max-width: 640px) {
    .container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    /* Dashboards/cards lose their oversized padding on phones */
    .premium-card { padding-left: 0.875rem; padding-right: 0.875rem; }
    .p-6, .p-8, .px-6, .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

/* ----- 25. STICKY HEADERS THAT NEVER OVERLAP CONTENT ----- */
@media (max-width: 768px) {
    /* Page top headers — keep them above scrolled tables/modals */
    .page-header.sticky, header.page-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: white;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .dark .page-header.sticky, .dark header.page-header {
        background: rgba(15,23,42,0.92);
    }
}

/* ----- 26. FORMS — single column on mobile, comfortable spacing ----- */
@media (max-width: 640px) {
    form .grid.gap-4 > * { min-width: 0; }
    /* Default form padding tighter on mobile */
    form .space-y-6 > * + * { margin-top: 1rem; }
    form .space-y-8 > * + * { margin-top: 1.25rem; }
    /* Submit buttons full-width by default */
    form button[type="submit"]:not(.btn-inline) { width: 100%; }
    /* Form-card sections */
    .form-card, form > .bg-white, form > .premium-card {
        padding: 1rem !important;
    }
}

/* ----- 27. DROPDOWNS & POPOVERS — keep on screen ----- */
@media (max-width: 640px) {
    .dropdown-menu, [x-show*="open"]:not(.modal-overlay):not(.cart-drawer-mobile) {
        max-width: calc(100vw - 1.5rem) !important;
    }
}

/* ----- 28. PAGINATION — wrap nicely on phones ----- */
@media (max-width: 640px) {
    .pagination, nav[role="navigation"][aria-label*="agination"] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    .pagination > *, nav[role="navigation"] > * { font-size: 0.75rem; }
}

/* ----- 29. DASHBOARD / KPI CARDS — fluid grid ----- */
@media (max-width: 480px) {
    .stat-card, .kpi-card {
        padding: 0.875rem !important;
    }
    .stat-card .text-2xl, .kpi-card .text-2xl,
    .stat-card .text-3xl, .kpi-card .text-3xl {
        font-size: 1.35rem !important;
        line-height: 1.6rem !important;
    }
}

/* ----- 30. CHARTS — responsive Chart.js wrappers ----- */
@media (max-width: 640px) {
    .chart-container, canvas[id*="chart"], canvas[id*="Chart"] {
        max-height: 240px !important;
    }
}

/* ----- 31. BACK-TO-TOP button area — leave room for it ----- */
@media (max-width: 768px) {
    main, .main-content {
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
}

/* ----- 32. FORCE clickable cells on mobile (cursor: pointer) ----- */
@media (hover: none) {
    tr[onclick], tr[\@click], tr.cursor-pointer { cursor: default; }
    tr[onclick]:active, tr[\@click]:active, tr.cursor-pointer:active {
        background: rgba(16,185,129,0.06) !important;
    }
}

/* ----- 33. INVOICE/RECEIPT row badges keep size on mobile ----- */
@media (max-width: 640px) {
    .premium-badge, .badge, [class*="rounded-full"][class*="px-2"] {
        font-size: 0.68rem !important;
        padding: 0.15rem 0.5rem !important;
    }
}

/* ----- 34. FILTER BARS / TOOLBARS — wrap on mobile ----- */
@media (max-width: 768px) {
    .toolbar, .filter-bar, .actions-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .toolbar > *, .filter-bar > *, .actions-toolbar > * {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 120px;
    }
}

/* ----- 35. CODE BLOCKS / PRE — scroll, not overflow ----- */
pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; }

/* ----- 36. UNIFIED LANDSCAPE PHONE TUNING ----- */
@media (max-width: 900px) and (orientation: landscape) {
    /* Fewer chrome pixels in landscape */
    header.sticky, .topnav-bar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}

/* ====================================================================
   37. POS CASHIER TOUCH-TARGET ENFORCEMENT (≥44x44 finger-safe)
   --------------------------------------------------------------------
   On phones, every button inside a POS sale-screen container is forced
   to a minimum 44x44 hit area so cashiers can tap reliably with fingers.
   Scoped to POS containers ONLY (Alpine x-data of restaurantPos/fbrPosInvoice
   + the .fbr-pos-stage class), so admin/DI/reports pages are unaffected.
   ==================================================================== */
@media (max-width: 768px) {
    [x-data*="restaurantPos"] button,
    [x-data*="restaurantPos"] [role="button"],
    [x-data*="restaurantPos"] a.cat-pill,
    [x-data*="fbrPosInvoice"] button,
    [x-data*="fbrPosInvoice"] [role="button"],
    .fbr-pos-stage button,
    .fbr-pos-stage [role="button"] {
        min-width: 44px !important;
        min-height: 44px !important;
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: 0.5rem !important;
    }
    /* Square icon-only buttons stay square (don't stretch wide) */
    [x-data*="restaurantPos"] button.w-8,
    [x-data*="restaurantPos"] button.w-9,
    [x-data*="fbrPosInvoice"] button.w-9,
    [x-data*="fbrPosInvoice"] button.w-10,
    .fbr-pos-stage button.w-9,
    .fbr-pos-stage button.w-10 {
        width: 44px !important;
        height: 44px !important;
    }
    /* Category pills / quick-add chips - keep visually compact but tappable */
    [x-data*="restaurantPos"] .cat-pill,
    [x-data*="restaurantPos"] .nav-pill {
        min-height: 40px !important;
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
    }
    /* Cart row qty/delete buttons - critical zone, force 44x44 */
    [x-data*="restaurantPos"] .cart-item button,
    [x-data*="restaurantPos"] [class*="cart"] button.w-7,
    [x-data*="restaurantPos"] [class*="cart"] button.h-7 {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    /* Modal close buttons (×) - finger-safe (POS-scoped only) */
    [x-data*="restaurantPos"] [class*="modal"] button:has(> svg[viewBox="0 0 24 24"]):not([class*="w-12"]):not([class*="w-16"]),
    [x-data*="fbrPosInvoice"] [class*="modal"] button:has(> svg[viewBox="0 0 24 24"]):not([class*="w-12"]):not([class*="w-16"]),
    .fbr-pos-stage [class*="modal"] button:has(> svg[viewBox="0 0 24 24"]):not([class*="w-12"]):not([class*="w-16"]) {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    /* Bottom mobile action bar - inflate Pay/Complete CTAs (POS-scoped only) */
    [x-data*="restaurantPos"] .lg\:hidden.fixed.bottom-0 button,
    [x-data*="restaurantPos"] .md\:hidden.fixed.bottom-0 button,
    [x-data*="fbrPosInvoice"] .lg\:hidden.fixed.bottom-0 button,
    [x-data*="fbrPosInvoice"] .md\:hidden.fixed.bottom-0 button,
    .fbr-pos-stage .lg\:hidden.fixed.bottom-0 button,
    .fbr-pos-stage .md\:hidden.fixed.bottom-0 button {
        min-height: 48px !important;
        font-weight: 700;
    }
    /* Numpad keys (FBR POS / PRA POS) - large tap zones */
    [x-data*="fbrPosInvoice"] .grid.grid-cols-3 > button,
    [x-data*="restaurantPos"] .grid.grid-cols-3 > button {
        min-height: 52px !important;
        font-size: 1.1rem !important;
    }
}