/* Mobile app shell — only on phones (under 768px). Desktop is untouched. */
.m-tabbar, .m-savebar, .m-appbar, .m-largetitle, .m-ptr, .m-filter-bg, .m-filter-done, .m-search-overlay, .m-scan-btn { display: none; }

/* ── Camera scanner (also used by the POS on any screen size) ── */
.fb-scan { position: fixed; inset: 0; z-index: 10050; background: #000; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.fb-scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-scan-top, .fb-scan-bottom { position: relative; z-index: 2; }
.fb-scan-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 26px; background: rgba(0, 0, 0, .5); }
.fb-scan-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; }
.fb-scan-round { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; font-size: 22px; background: rgba(255, 255, 255, .18); }
.fb-scan-round[hidden] { display: none; }
.fb-scan-round.on { background: #FFD60A; color: #000; }
.fb-scan-top::after { content: ''; width: 42px; flex: none; }
.fb-scan-top:has([data-scan="torch"]:not([hidden]))::after { display: none; }
.fb-scan-frame { position: absolute; z-index: 1; left: 50%; top: 42%; width: min(78vw, 340px); height: min(50vw, 220px); transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42); overflow: hidden; }
.fb-scan-frame i { position: absolute; width: 30px; height: 30px; border: 4px solid #fff; }
.fb-scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.fb-scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.fb-scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.fb-scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.fb-scan-frame.hit { animation: fb-scan-hit .28s ease-out; }
@keyframes fb-scan-hit { from { box-shadow: 0 0 0 100vmax rgba(31, 168, 79, .55), inset 0 0 0 4px #1FA84F; } }
.fb-scan-frame span { position: absolute; left: 6%; right: 6%; top: 8%; height: 2px; background: #F26A35; box-shadow: 0 0 12px 2px rgba(242, 106, 53, .9); animation: fb-scan-line 1.5s ease-in-out infinite alternate; }
@keyframes fb-scan-line { to { top: 90%; } }
.fb-scan-bottom { padding: 28px 14px calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, .5); }
.fb-scan-status { min-height: 44px; padding: 11px 14px; border-radius: 14px; text-align: center; font-size: 15px; font-weight: 600; background: rgba(255, 255, 255, .16); }
.fb-scan-status[data-kind="ok"] { background: #1FA84F; }
.fb-scan-status[data-kind="error"] { background: #E5352B; }
.fb-scan-manual { display: flex; gap: 8px; margin: 0; }
.fb-scan-manual input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; font-size: 16px; color: #1C1C1E; background: #fff; }
.fb-scan-manual button { height: 48px; padding: 0 20px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .22); }
.fb-scan-done { height: 52px; border: 0; border-radius: 16px; font-size: 17px; font-weight: 700; color: #fff; background: #F26A35; }
.fb-scan-done[hidden] { display: none; }
body.fb-scan-open { overflow: hidden; }

@media (max-width: 767.98px) {
    /* Cross-page transitions: the bars stay put and the content eases in */
    @view-transition { navigation: auto; }

    :root {
        --m-tabbar-h: 64px; --m-appbar-h: 52px; --m-gap: 10px;
        --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-t: env(safe-area-inset-top, 0px);
        --m-tint: var(--ios-tint, #F26A35); --m-tint-rgb: var(--ios-tint-rgb, 242, 106, 53);
        --m-spring: cubic-bezier(.32, .72, 0, 1);
        --m-card-shadow: 0 1px 2px rgba(17, 12, 34, .04), 0 8px 24px rgba(17, 12, 34, .05);
    }
    [data-bs-theme="dark"] { --m-card-shadow: none; }

    ::view-transition-old(root) { animation: m-vt-out .08s linear both; }
    ::view-transition-new(root) { animation: m-vt-in .16s ease-out both; }
    ::view-transition-group(m-tabbar), ::view-transition-group(m-appbar) { animation-duration: 0s; }
    ::view-transition-old(m-tabbar), ::view-transition-old(m-appbar) { display: none; }
    ::view-transition-new(m-tabbar), ::view-transition-new(m-appbar) { animation: none; }
    ::view-transition-group(m-tab-ind) { animation-duration: .36s; animation-timing-function: var(--m-spring); }
    @keyframes m-vt-out { to { opacity: 0; transform: scale(.985); } }
    @keyframes m-vt-in { from { opacity: 0; transform: translateY(14px); } }
    @keyframes m-rise { from { opacity: 0; transform: translateY(12px); } }
    @keyframes m-pop { from { opacity: 0; transform: scale(.82); } }
    @keyframes m-spin { to { transform: translate(-50%, 60px) rotate(360deg); } }
    @keyframes m-bar { 0% { left: -40%; width: 40%; } 100% { left: 100%; width: 40%; } }

    /* iOS: 16px fields never trigger zoom on focus */
    input.form-control, select.form-select, select.form-control, textarea.form-control, .select2-selection, .m-app input, .m-app select, .m-app textarea { font-size: 16px !important; }

    html.m-app { -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--m-appbar-h) + var(--m-safe-t) + 12px); scroll-padding-bottom: 24px; }
    html.m-app *, html.m-app *::before, html.m-app *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
        @keyframes m-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
    .m-shake { animation: m-shake .4s ease; border-color: var(--ios-red, #FF3B30) !important; }
    html.m-app, html.m-app body { overflow-x: clip; max-width: 100vw; }
    html.m-app body {
        padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-b) + 28px);
        overscroll-behavior-y: contain; background: var(--ios-bg, #f2f2f7) !important; -webkit-font-smoothing: antialiased;
    }
    html.m-app button, html.m-app .btn, html.m-app a { touch-action: manipulation; }
    html.m-app .btn:active { transform: scale(.97); }

    /* ── Original chrome out of the way ──────────── */
    html.m-app #layout-navbar { display: none !important; }
    html.m-app #fb-sidebar, html.m-app .fb-side-shade { display: none !important; }
    html.m-app .content-footer, html.m-app .footer { display: none !important; }
    html.m-app .layout-page { display: block !important; width: 100%; padding-top: calc(var(--m-appbar-h) + var(--m-safe-t)) !important; }
    html.m-app .content-wrapper { display: block !important; width: 100% !important; }
    html.m-app .content-wrapper, html.m-app .page-body { padding-top: 0 !important; margin-top: 0 !important; }
    html.m-app .content-wrapper > .container-xxl, html.m-app .content-wrapper > .container-fluid, html.m-app .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
    html.m-app .page-header { padding-top: 0 !important; padding-bottom: 4px !important; margin: 0 !important; }
    html.m-app .card { border-radius: 20px !important; border: 0 !important; box-shadow: var(--m-card-shadow) !important; }
    html.m-app .card-body { padding: 16px !important; }
    html.m-app .row { --bs-gutter-x: 12px; }

    /* ── App bar ─────────────────────────────────── */
    html.m-app .m-appbar {
        display: flex; align-items: center; gap: 2px; position: fixed; top: 0; left: 0; right: 0; z-index: 1034;
        height: calc(var(--m-appbar-h) + var(--m-safe-t)); padding: var(--m-safe-t) 10px 0 6px;
        background: transparent; view-transition-name: m-appbar;
        transition: background .22s, box-shadow .22s;
    }
    html.m-app.m-scrolled .m-appbar, html.m-app.m-form-screen .m-appbar {
        background: var(--ios-surface, #fff);
        box-shadow: 0 .5px 0 var(--ios-separator);
    }
    .m-ab-title {
        flex: 1; min-width: 0; padding-left: 8px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--ios-label);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .28s var(--m-spring);
    }
    html.m-scrolled .m-ab-title, html.m-form-screen .m-ab-title { opacity: 1; transform: none; }
    .m-ab-actions { display: flex; align-items: center; gap: 4px; flex: none; }
    .m-ab-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; flex: none; background: transparent; color: var(--ios-label); font-size: 22px; padding: 0; }
    .m-ab-btn[hidden] { display: none; }
    .m-ab-btn:active { background: var(--ios-fill); transform: scale(.92); }
    .m-ab-back { color: var(--m-tint); font-size: 26px; }
    .m-ab-add { background: var(--m-tint); color: #fff !important; font-size: 21px; box-shadow: 0 4px 12px rgba(var(--m-tint-rgb), .4); margin: 0 3px; }
    .m-ab-add:active { background: var(--m-tint); }
    .m-ab-avatar { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--ios-fill); flex: none; margin-left: 2px; box-shadow: 0 0 0 2px var(--ios-surface, #fff), 0 1px 6px rgba(0, 0, 0, .15); }
    .m-ab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    html.m-form-screen .m-ab-avatar { display: none; }

    /* Large title that hands over to the app bar on scroll */
    html.m-app .m-largetitle { display: block; padding: 0 16px 10px; }
    .m-largetitle h1 { margin: 0; font-size: 32px; line-height: 1.12; font-weight: 750; letter-spacing: -.035em; color: var(--ios-label); }
    html.m-form-screen .m-largetitle { display: none !important; }

    /* The page's own list heading and Add / Cancel: moved to the app bar */
    html.m-app .page-header > .row:has(#addToTable) { margin: 0 !important; min-height: 0; }
    html.m-app .page-header > .row:has(#addToTable) > [class*="col-"]:first-child { display: none; }
    html.m-app .page-header > .row:has(#addToTable) > [class*="col-"] { padding: 0; }
    html.m-app #addToTable, html.m-app #btnCancel { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden; }

    /* Loading line while the next screen opens */
    html.m-navigating .m-appbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: linear-gradient(90deg, transparent, var(--m-tint), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: m-shimmer 1s linear infinite; }
    @keyframes m-shimmer { from { background-position: -60% 0; } to { background-position: 160% 0; } }

    /* ── Global search overlay ───────────────────── */
    .m-search-overlay { display: none; }
    body.m-search-open .m-search-overlay { display: flex; align-items: flex-start; gap: 8px; position: fixed; inset: 0; z-index: 1050; padding: calc(var(--m-safe-t) + 8px) 12px 12px; background: var(--ios-bg, #f2f2f7); animation: m-rise .22s var(--m-spring) both; }
    .m-search-overlay .navbar-search-wrapper { list-style: none; flex: 1; min-width: 0; width: auto !important; margin: 0 !important; position: static !important; }
    .m-search-overlay .navbar-search-wrapper > .d-flex { height: 44px; border-radius: 14px !important; background: var(--ios-fill, rgba(120, 120, 128, .12)) !important; }
    .m-search-overlay #global-search-input { min-height: 0 !important; height: 40px; background: transparent !important; box-shadow: none !important; border: 0 !important; }
    .m-search-overlay #global-search-results { position: fixed !important; top: calc(var(--m-safe-t) + 62px) !important; left: 12px; right: 12px; width: auto !important; max-height: calc(100dvh - var(--m-safe-t) - 80px) !important; border-radius: 16px; overflow: auto; box-shadow: var(--m-card-shadow); }
    html.m-app .m-search-cancel { display: block; flex: none; height: 44px; border: 0; background: none; color: var(--m-tint); font-size: 16px; font-weight: 600; padding: 0 4px; }
    body.m-search-open .m-tabbar { transform: translateY(160%); }

    /* ── Floating tab bar ────────────────────────── */
    html.m-app .m-tabbar {
        display: flex; align-items: center; position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--m-safe-b)); z-index: 1035;
        height: var(--m-tabbar-h); padding: 0 6px; border-radius: 26px;
        background: var(--ios-surface, #fff);
        box-shadow: 0 0 0 .5px var(--ios-separator), 0 10px 26px rgba(17, 12, 34, .14);
        transition: transform .32s var(--m-spring); view-transition-name: m-tabbar;
    }
    .m-tab {
        flex: 1; min-width: 0; height: 100%; border: 0; background: none; padding: 0; position: relative; color: var(--ios-label-2, #8e8e93);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; -webkit-user-select: none; user-select: none;
    }
    .m-tab b { font-size: 10.5px; font-weight: 600; line-height: 1; position: relative; }
    .m-tab i { font-size: 23px; line-height: 1; position: relative; transition: transform .3s var(--m-spring); }
    .m-ind { position: absolute; top: 9px; left: 50%; width: 50px; height: 30px; margin-left: -25px; border-radius: 15px; background: transparent; }
    .m-tab.active { color: var(--m-tint); }
    .m-tab.active b { font-weight: 700; }
    .m-tab.active .m-ind { background: rgba(var(--m-tint-rgb), .14); view-transition-name: m-tab-ind; }
    .m-tab:active i { transform: scale(.84); }
    .m-tab-new span {
        width: 56px; height: 56px; margin-top: -26px; border-radius: 20px; display: grid; place-items: center; color: #fff;
        background: #F26A35;
        box-shadow: 0 10px 22px rgba(var(--m-tint-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px var(--ios-bg, #f2f2f7);
        transition: transform .3s var(--m-spring);
    }
    .m-tab-new:active span { transform: scale(.9) rotate(90deg); }
    .m-tab-new i { font-size: 28px; }

    /* Typing (keyboard up), a form or a pop-up open: tab bar steps aside */
    body.m-typing .m-tabbar, body.m-form-open .m-tabbar, body.modal-open .m-tabbar, body.m-filters-open .m-tabbar, body.fb-scan-open .m-tabbar { transform: translateY(160%); }
    body.m-typing .m-filter-done { transform: translateY(200%); }
    .modal-dialog .modal-content { max-height: min(92dvh, var(--m-vh, 92dvh)) !important; }

    /* ── Sticky Save bar on entry forms ──────────── */
    html.m-app .m-savebar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036; padding: 10px 14px calc(10px + var(--m-safe-b));
        background: var(--ios-surface, #fff);
        box-shadow: 0 -.5px 0 var(--ios-separator); transform: translateY(110%); transition: transform .24s var(--m-spring);
    }
    body.m-form-open.m-has-save .m-savebar { transform: none; }
    /* The keyboard needs the room: Save returns when typing ends (Next on the last field) */
    body.m-form-open.m-typing .m-savebar, body.m-form-open.modal-open .m-savebar { transform: translateY(110%); }
    .m-savebar.saving .m-save { opacity: .65; pointer-events: none; }
    html.m-app .m-savebar { display: flex; gap: 10px; }
    html.m-app .m-savebar .m-save { flex: 1; }
    .m-save-scan { flex: none; width: 58px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 16px; font-size: 26px; color: var(--m-tint); background: rgba(var(--m-tint-rgb), .13); }
    .m-save-scan[hidden] { display: none; }
    .m-save-scan:active { transform: scale(.95); }

    /* Scan button inside a field */
    html.m-app .m-scan-btn { display: grid; place-items: center; position: absolute; top: 4px; right: 4px; z-index: 5; width: 40px; height: 38px; padding: 0; border: 0; border-radius: 10px; font-size: 22px; color: var(--m-tint); background: rgba(var(--m-tint-rgb), .13); }
    html.m-app .m-scan-btn:active { transform: scale(.92); }
    html.m-app input.m-has-scan { padding-right: 50px !important; }
    html.m-app .input-group > .m-scan-btn { z-index: 6; }

    /* Dropdown lists sit at the top of the screen, always clear of the keyboard */
    html.m-app .position-absolute:has(> .sticky-top > input[x-ref="searchInput"]), html.m-app .position-absolute:has(> div > input[x-ref="searchInput"]) {
        position: fixed !important; top: calc(var(--m-safe-t) + 10px) !important; left: 10px !important; right: 10px !important; width: auto !important; margin: 0 !important; z-index: 1085 !important;
        max-height: min(62dvh, calc(var(--m-vh, 100dvh) - 24px)) !important; border: 0 !important; border-radius: 18px !important; background: var(--ios-surface, #fff) !important; box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .45) !important; overflow-y: auto !important;
    }
    html.m-app input[x-ref="searchInput"] { min-height: 44px; }
    html.m-app .position-absolute:has(input[x-ref="searchInput"]) li { min-height: 46px; display: flex; align-items: center; padding: 8px 14px !important; }
    html.m-app .position-absolute:has(input[x-ref="searchInput"]) .sticky-top { background: var(--ios-surface, #fff) !important; }
    body > .select2-container--open { position: fixed !important; top: calc(var(--m-safe-t) + 10px) !important; left: 10px !important; right: 10px !important; width: auto !important; z-index: 1090 !important; }
    body > .select2-container--open .select2-dropdown { position: static !important; width: 100% !important; border: 0 !important; border-radius: 18px !important; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(10, 8, 20, .45) !important; }
    body > .select2-container--open .select2-results__options { max-height: min(50dvh, calc(var(--m-vh, 100dvh) - 110px)) !important; }
    body > .select2-container--open .select2-results__option { min-height: 44px; padding: 11px 14px; }
    html.m-app .list-group.position-absolute { z-index: 1020 !important; max-height: 42dvh !important; overflow-y: auto; border-radius: 14px !important; }
    html.m-app .list-group-item-action { min-height: 48px; }

    /* Forms: one clean page */
    html.m-app #addContainer, html.m-app #editContainer { margin-left: 0 !important; margin-right: 0 !important; }
    html.m-app #addContainer > [class*="col"], html.m-app #editContainer > [class*="col"] { padding: 0 !important; }
    html.m-app #addContainer .card-header, html.m-app #editContainer .card-header { padding: 10px 14px 0 !important; min-height: 0; border: 0 !important; background: none !important; }
    html.m-app #addContainer .card-header h1, html.m-app #addContainer .card-header h2, html.m-app #addContainer .card-header h3, html.m-app #addContainer .card-header h4, html.m-app #addContainer .card-header h5,
    html.m-app #editContainer .card-header h1, html.m-app #editContainer .card-header h2, html.m-app #editContainer .card-header h3, html.m-app #editContainer .card-header h4, html.m-app #editContainer .card-header h5 { display: none; }
    html.m-app #addContainer .card-header > *, html.m-app #editContainer .card-header > * { margin: 0 0 0 auto !important; }
    html.m-app #addContainer .card .card, html.m-app #editContainer .card .card { box-shadow: none !important; background: var(--ios-surface-2, #f9f9fb) !important; border-radius: 16px !important; }
    html.m-app #addContainer .card .card > .card-body, html.m-app #editContainer .card .card > .card-body { padding: 12px !important; }
    html.m-app #addContainer .card:has(> .card-header):not(:has(input, select, textarea, [role="combobox"], .btn)), html.m-app #editContainer .card:has(> .card-header):not(:has(input, select, textarea, [role="combobox"], .btn)) { display: none; }
    html.m-app .m-form-save { position: absolute !important; left: -9999px !important; }
    html.m-app .form-control-sm, html.m-app .input-group-sm > .form-control { min-height: 42px; font-size: 16px !important; }
    html.m-app .fb-dropzone { padding: 12px !important; }
    html.m-app .fb-dropzone .ti, html.m-app .fb-dropzone [class*="rounded-circle"] { transform: scale(.82); }
    html.m-app .fb-dropzone p, html.m-app .fb-dropzone h6 { margin-bottom: 2px !important; }

    /* Bill totals: discount fields side by side */
    html.m-app .d-flex.gap-1:has(> .input-group) { width: 100% !important; flex-wrap: nowrap; }
    html.m-app .d-flex.gap-1 > .input-group { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
    html.m-app .d-flex.gap-1 > .input-group > .form-control { min-width: 0; width: 100%; }
    html.m-app .d-flex.align-items-center:has(> .d-flex.gap-1 > .input-group) { flex-wrap: wrap; }

    /* Long bills: one thin row per item, tap the name to edit, newest on top */
    table.m-lines-compact > tbody { display: flex !important; flex-direction: column-reverse; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 .5px var(--ios-separator-strong, rgba(60, 60, 67, .22)); margin-bottom: 10px; }
    table.m-lines-compact > tbody > tr.m-line-blank { display: none !important; }
    table.m-lines-compact > tbody > tr:not(.m-line-full):not(.m-open) { grid-template-columns: minmax(0, 1fr) auto 66px; gap: 0 8px; align-items: center; min-height: 52px; padding: 5px 10px; margin: 0; border-radius: 0; box-shadow: 0 .5px 0 var(--ios-separator); }
    table.m-lines-compact > tbody > tr:not(.m-open) > td:not(.m-line-name):not(.m-line-qty):not(.m-line-amount) { display: none !important; }
    table.m-lines-compact > tbody > tr:not(.m-open) > td::before { display: none; }
    table.m-lines-compact > tbody > tr:not(.m-open) > td.m-line-name { grid-column: 1; order: 0; padding-right: 0 !important; }
    table.m-lines-compact td.m-line-name { cursor: pointer; }
    table.m-lines-compact td.m-line-name input { pointer-events: none; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600; color: var(--ios-label) !important; opacity: 1 !important; text-overflow: ellipsis; }
    table.m-lines-compact td.m-line-name::after { content: attr(data-sub); font-size: 12px; color: var(--ios-label-2); font-variant-numeric: tabular-nums; }
    table.m-lines-compact td.m-line-qty > .input-group, table.m-lines-compact td.m-line-qty > div { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
    table.m-lines-compact td.m-line-qty .input-group-text { display: none; }
    table.m-lines-compact td.m-line-qty input { width: 40px !important; flex: none; min-height: 36px !important; height: 36px; padding: 0 2px !important; border: 0 !important; border-radius: 8px !important; background: var(--ios-fill-2) !important; text-align: center; font-size: 15px !important; font-weight: 600; -moz-appearance: textfield; }
    table.m-lines-compact td.m-line-qty input::-webkit-inner-spin-button, table.m-lines-compact td.m-line-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .m-q { width: 30px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; font-size: 15px; color: var(--m-tint); background: rgba(var(--m-tint-rgb), .12); }
    .m-q:active { transform: scale(.9); background: rgba(var(--m-tint-rgb), .25); }
    table.m-lines-compact td.m-line-amount .input-group-text { display: none; }
    table.m-lines-compact td.m-line-amount input { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: right; font-size: 14px !important; font-weight: 700; color: var(--ios-label) !important; opacity: 1 !important; }
    table.m-lines-compact > tbody > tr.m-open { margin: 6px; box-shadow: 0 0 0 1.5px var(--m-tint) !important; }
    html.m-app #addContainer .btn:has(+ table.m-lines-compact), html.m-app .m-lines-compact ~ .btn { display: none; }

    html.m-app .card table.m-lines > tbody > tr > td { padding: 0 !important; border: 0 !important; }
    html.m-app .card table.m-lines-compact > tbody > tr:not(.m-open) > td.m-line-name { padding-right: 0 !important; }
    html.m-app .card table.m-lines > tbody > tr > td.m-line-name { padding-right: 46px !important; }
    html.m-app .card table.m-lines-compact > tbody > tr:not(.m-open) > td.m-line-name { padding-right: 0 !important; }
    html.m-app table.m-lines-compact td.m-line-qty input { min-width: 0 !important; width: 36px !important; }
    html.m-app .m-q { width: 28px; height: 34px; }
    html.m-app table.m-lines-compact > tbody > tr:not(.m-open) .input-group-text { display: none !important; }
    html.m-app table.m-lines-compact > tbody > tr:not(.m-open) .input-group { flex-wrap: nowrap; gap: 2px; }
    html.m-app table.m-lines-compact > tbody > tr:not(.m-open) > td.m-line-amount input { width: 100% !important; min-width: 0 !important; }
    html.m-app table.m-lines-compact > tbody > tr:not(.m-line-full):not(.m-open) { grid-template-columns: minmax(0, 1fr) auto 62px; min-height: 48px; padding: 4px 10px; }
    html.m-app table.m-lines-compact > tbody > tr.m-open td.m-line-name::after { display: none; }
    html.m-app .card:has(table.m-lines-compact) [wire\:click\.prevent="addItem"], html.m-app .card:has(table.m-lines-compact) [wire\:click="addItem"] { display: none !important; }

    /* Bill lines and journal rows: a card per line */
    html.m-app .table-responsive:has(> table.m-lines) { overflow: visible !important; border: 0 !important; min-height: 0 !important; max-height: none !important; }
    table.m-lines, table.m-lines > tbody { display: block; width: 100% !important; min-width: 0 !important; border: 0 !important; background: none !important; }
    table.m-lines > thead { display: none; }
    table.m-lines > tfoot { display: block; }
    table.m-lines > tbody > tr:not(.m-line-full) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 10px; position: relative; padding: 12px; margin-bottom: 10px; border-radius: 16px; background: var(--ios-surface, #fff) !important; box-shadow: 0 0 0 .5px var(--ios-separator-strong, rgba(60, 60, 67, .22)); }
    table.m-lines > tbody > tr.m-line-full, table.m-lines > tbody > tr.m-line-full > td { display: block; width: 100%; border: 0 !important; padding: 0 !important; background: none !important; }
    table.m-lines > tbody > tr > td { display: flex; flex-direction: column; gap: 3px; min-width: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; white-space: normal !important; font-size: 14px; }
    table.m-lines > tbody > tr > td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--ios-label-2); }
    table.m-lines > tbody > tr > td.m-line-no, table.m-lines > tbody > tr > td.m-line-empty { display: none; }
    table.m-lines > tbody > tr > td.m-line-name { grid-column: 1 / -1; order: -1; padding-right: 40px !important; }
    table.m-lines > tbody > tr > td.m-line-name::before { display: none; }
    table.m-lines > tbody > tr > td.m-line-remove { position: absolute; top: 10px; right: 10px; z-index: 2; }
    table.m-lines > tbody > tr > td.m-line-remove::before { display: none; }
    table.m-lines > tbody > tr > td.m-line-remove .btn { width: 36px; height: 36px; padding: 0 !important; display: grid; place-items: center; border-radius: 11px !important; }
    table.m-lines input, table.m-lines select, table.m-lines [role="combobox"] { width: 100% !important; min-width: 0 !important; }
    table.m-lines > tbody > tr, table.m-lines > tbody > tr > td { border: 0 !important; }
    table.m-lines > tbody > tr > td.m-line-wide { grid-column: 1 / -1; }
    table.m-lines > tbody > tr > td.m-line-wide > .d-flex, table.m-lines > tbody > tr > td.m-line-wide .input-group { flex-wrap: nowrap; }
    table.m-lines > tbody > tr > td.m-line-wide .input-group { flex: 1 1 0; min-width: 0; }
    table.m-lines > tbody > tr > td { align-items: stretch; text-align: left !important; }
    table.m-lines > tbody > tr > td.m-line-remove { width: 36px !important; }
    table.m-lines > tbody > tr > td.m-line-name, .card table.m-lines > tbody > tr > td.m-line-name { padding-right: 46px !important; }
    html.m-app .select2-selection--multiple .select2-search--inline .select2-search__field { padding-left: 22px !important; }
    .m-save {
        width: 100%; height: 50px; border: 0; border-radius: 16px; font-size: 17px; font-weight: 700; color: #fff;
        background: #F26A35; box-shadow: 0 8px 20px rgba(var(--m-tint-rgb), .35);
        display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .m-save:active { transform: scale(.98); }
    html.m-app body.m-form-open { padding-bottom: calc(96px + var(--m-safe-b)); }
    html.m-app body.m-form-open .page-header > .row { margin-top: 0 !important; }

    /* ── Forms ───────────────────────────────────── */
    html.m-app .form-label, html.m-app label.col-form-label { font-size: 13px; font-weight: 600; color: var(--ios-label-2); margin-bottom: 5px; }
    html.m-app input.form-control:not([type=checkbox]):not([type=radio]), html.m-app select.form-select, html.m-app select.form-control, html.m-app .select2-selection--single { min-height: 46px; border-radius: 13px !important; }
    html.m-app textarea.form-control { border-radius: 13px !important; }
    html.m-app .select2-selection--single .select2-selection__rendered { line-height: 44px !important; }
    html.m-app .select2-selection--single .select2-selection__arrow { height: 44px !important; }
    html.m-app .select2-container { max-width: 100%; }

    /* ── Sheets (menu, new entry, row actions) ───── */
    .m-sheet-wrap { position: fixed; inset: 0; z-index: 1065; }
    .m-sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 20, 0); transition: background .28s; }
    .m-sheet-wrap.open .m-sheet-backdrop { background: rgba(10, 8, 20, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .m-sheet {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 6px 16px calc(18px + var(--m-safe-b)); border-radius: 26px 26px 0 0;
        background: var(--ios-bg, #f2f2f7); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
        transform: translateY(100%); transition: transform .38s var(--m-spring); overscroll-behavior: contain;
    }
    .m-sheet.tall { height: 88dvh; display: flex; flex-direction: column; overflow: hidden; }
    .m-sheet.fit { display: flex; flex-direction: column; overflow: hidden; }
    .m-sheet-wrap.open .m-sheet { transform: none; }
    .m-grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--ios-label-3, rgba(60, 60, 67, .3)); margin: 4px auto 8px; flex: none; }
    .m-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 12px; flex: none; }
    .m-sheet-head h2 { font-size: 22px; font-weight: 750; letter-spacing: -.03em; margin: 0; color: var(--ios-label); min-width: 0; overflow-wrap: anywhere; }
    .m-row-head p { margin: 2px 0 0; font-size: 15px; font-weight: 650; color: var(--m-tint); font-variant-numeric: tabular-nums; }
    .m-row-head-text { min-width: 0; }
    .m-done { border: 0; background: none; color: var(--m-tint); font-size: 16px; font-weight: 600; flex: none; padding: 4px 2px; }
    .m-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 13px; background: var(--ios-fill, rgba(120, 120, 128, .14)); color: var(--ios-label-2); margin-bottom: 8px; flex: none; }
    .m-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ios-label); }
    .m-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 20px; overscroll-behavior: contain; }
    .m-group-title { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ios-label-2); margin: 16px 14px 6px; }
    .m-group[hidden], .m-row[hidden] { display: none; }
    .m-list { background: var(--ios-surface, #fff); border-radius: 16px; overflow: hidden; }
    .m-list-danger { margin-top: 14px; }
    .m-row { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 52px; width: 100%; border: 0; background: none; text-align: left; color: var(--ios-label); text-decoration: none; position: relative; }
    .m-row:not(:last-child)::after { content: ''; position: absolute; left: 58px; right: 0; bottom: 0; height: .5px; background: var(--ios-separator); }
    .m-row:active { background: var(--ios-fill-2); }
    .m-row:disabled { opacity: .4; }
    .m-row-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--m-tint-rgb), .13); color: var(--m-tint); font-size: 18px; flex: none; }
    .m-row-label { flex: 1; min-width: 0; font-size: 16px; }
    .m-row.is-danger { color: var(--ios-red, #FF3B30); }
    .m-row.is-danger .m-row-icon { background: rgba(255, 59, 48, .12); color: var(--ios-red, #FF3B30); }
    .m-chev { color: var(--ios-label-3); font-size: 18px; }
    .m-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
    .m-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 0; border-radius: 18px; background: var(--ios-surface, #fff); color: var(--ios-label); font-size: 12.5px; font-weight: 600; line-height: 1.2; animation: m-pop .32s var(--m-spring) both; }
    .m-quick-btn span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; background: rgba(var(--m-tint-rgb), .13); color: var(--m-tint); }
    .m-quick-btn:active { transform: scale(.95); }
    .m-segment { display: flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--ios-fill, rgba(120, 120, 128, .14)); }
    .m-segment button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ios-label); font-size: 15px; font-weight: 600; transition: background .2s; }
    .m-segment button.on { background: var(--ios-surface, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
    .m-new-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-bottom: 6px; }
    .m-new { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 6px 13px; border-radius: 18px; background: var(--ios-surface, #fff); color: var(--ios-label); text-decoration: none; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; animation: m-pop .36s var(--m-spring) both; animation-delay: calc(var(--i, 0) * 22ms); }
    .m-new:active { transform: scale(.95); }
    .m-new:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; padding: 12px; font-size: 14px; }
    .m-new span { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 25px; color: #fff; background: var(--c); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }
    .m-hero-link { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 18px; color: #fff; text-decoration: none; background: #F26A35; box-shadow: 0 10px 24px rgba(var(--m-tint-rgb), .35); }
    .m-hero-link:hover { color: #fff; }
    .m-hero-link:active { transform: scale(.98); }
    .m-hero-link > span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255, 255, 255, .22); flex: none; }
    .m-hero-link div { flex: 1; min-width: 0; line-height: 1.25; }
    .m-hero-link b { display: block; font-size: 16px; }
    .m-hero-link small { font-size: 12.5px; opacity: .85; }
    body.m-sheet-open { overflow: hidden; }

    /* ── Lists: the card wrapper melts away, rows float ── */
    html.m-app #tableContainer > .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
    html.m-app .card:has(table.m-cards) { background: transparent !important; box-shadow: none !important; }
    html.m-app .card:has(table.m-cards) > .card-body { padding: 0 !important; background: transparent !important; }
    html.m-app .table-responsive:has(table.m-cards) { border: 0 !important; background: transparent !important; overflow: visible; }

    html.m-app .m-toolbar { margin: 0 0 12px !important; row-gap: 8px; }
    html.m-app .m-toolbar > [class*="col-"] { flex: 1 1 100%; max-width: 100%; width: 100%; padding: 0; display: flex !important; flex-wrap: wrap; gap: 8px; justify-content: flex-start !important; }
    html.m-app .m-toolbar > .m-limit-col { display: none !important; }
    html.m-app .m-toolbar .m-tool { display: none !important; }
    html.m-app .m-toolbar .d-flex:not(:has(input, select)) { position: static; margin: 0; gap: 0 !important; }
    html.m-app .m-toolbar > [class*="col-"] > div:has(#search), html.m-app .m-toolbar > [class*="col-"] > div:has(input[type=search]) { flex: 1 1 100%; width: 100%; max-width: 100%; }
    html.m-app .m-toolbar #search, html.m-app .m-toolbar input[type=search] {
        width: 100% !important; height: 44px; min-height: 44px; border: 0 !important; border-radius: 14px !important; padding-left: 40px !important; background-color: var(--ios-fill, rgba(120, 120, 128, .12)) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: 13px center !important; box-shadow: none !important;
    }
    /* Import panel opens as a sheet, its button lives in the tools sheet */
    html.m-app .import-popover-panel { position: fixed !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(10px + var(--m-safe-b)) !important; width: auto !important; max-width: none !important; max-height: 80dvh; overflow: auto; z-index: 1070; border-radius: 22px !important; }

    /* ── Lists: thin lines, hundreds of rows stay readable ── */
    table.m-cards, table.m-cards tbody, table.m-cards tfoot { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; background: transparent !important; border: 0 !important; }
    table.m-cards thead, table.m-cards caption:empty { display: none; }
    table.m-cards caption { display: block; padding: 0 !important; margin: 0 !important; }
    table.m-cards:not(:has(> tbody > tr)) > tfoot { display: none; }
    table.m-cards:not(:has(> tbody > tr))::after { content: 'Nothing to show'; display: block; padding: 56px 16px; text-align: center; font-size: 15px; color: var(--ios-label-2); }
    table.m-cards > tbody { background: var(--ios-surface, #fff) !important; border-radius: 16px; overflow: hidden; margin-bottom: 10px; box-shadow: var(--m-card-shadow); }
    table.m-cards > tbody:empty { display: none; }
    table.m-cards > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; position: relative; max-height: 66px; overflow: hidden;
        padding: 9px 28px 0 14px; border-bottom: 7px solid transparent; box-shadow: 0 .5px 0 var(--ios-separator); background: transparent !important;
        content-visibility: auto; contain-intrinsic-size: auto 50px;
    }
    table.m-cards > tbody > tr.m-tappable { cursor: pointer; }
    table.m-cards > tbody > tr.m-tappable:active { background: var(--ios-fill-2) !important; }
    table.m-cards > tbody > tr.m-tappable::after { content: '›'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--ios-label-3); pointer-events: none; }
    table.m-cards > tbody > tr.m-full { display: block; max-height: none; background: transparent !important; text-align: center; color: var(--ios-label-2); padding: 40px 16px; }
    table.m-cards td, .card table.m-cards > tbody > tr > td {
        display: inline-flex; flex-direction: row; align-items: baseline; gap: 3px; padding: 0 !important; border: 0 !important; min-width: 0; max-width: 100%; background: none !important;
        white-space: nowrap !important; font-size: 12.5px !important; font-weight: 500; text-align: left !important; color: var(--ios-label); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
    }
    table.m-cards td::before { content: attr(data-label); font-size: 11.5px; font-weight: 400; color: var(--ios-label-2); flex: none; }
    table.m-cards td.m-skip, .card table.m-cards > tbody > tr > td.m-skip { display: none; }
    table.m-cards td.m-actions, .card table.m-cards > tbody > tr > td.m-actions { display: none; }
    table.m-cards td.m-title, .card table.m-cards > tbody > tr > td.m-title { display: block; flex: 1 1 100%; order: -2; font-size: 15px !important; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
    table.m-cards td.m-title::before { display: none; }
    table.m-cards tr:has(td.m-amount) td.m-title, .card table.m-cards > tbody > tr:has(td.m-amount) > td.m-title { padding-right: 100px !important; }
    table.m-cards td.m-amount, .card table.m-cards > tbody > tr > td.m-amount { position: absolute; top: 9px; right: 26px; max-width: 96px; font-size: 15px !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--m-tint); }
    table.m-cards td.m-amount::before { display: none; }
    table.m-cards tr:has(td.m-check) td.m-title, .card table.m-cards > tbody > tr:has(td.m-check) > td.m-title { padding-left: 28px !important; }
    table.m-cards td.m-check, .card table.m-cards > tbody > tr > td.m-check { position: absolute; top: 9px; left: 14px; z-index: 1; overflow: visible; }
    table.m-cards td.m-check::before { display: none; }
    table.m-cards td.m-check .form-check { margin: 0 !important; padding: 0 !important; min-height: 0; }
    table.m-cards td input[type=checkbox] { align-self: flex-start; width: 20px; height: 20px; margin: 0 !important; float: none !important; }

    /* The same lists as a real table (••• → View → Table) */
    table.m-table { font-size: 13px; min-width: max-content; }
    table.m-table th, table.m-table td { padding: 8px 10px !important; white-space: nowrap; }
    html:not(.m-report) table.m-table th:nth-child(2), html:not(.m-report) table.m-table td:nth-child(2) { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--ios-separator); }
    html:not(.m-report) table.m-table td:nth-child(2) { background: var(--ios-surface, #fff) !important; }
    html:not(.m-report) table.m-table th:nth-child(2) { background: var(--ios-surface-2, #f9f9fb) !important; }

    /* Row sheet: the whole record */
    .m-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; background: var(--ios-surface, #fff); }
    .m-detail small { display: block; font-size: 11px; color: var(--ios-label-2); }
    .m-detail span { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; color: var(--ios-label); }

    /* Totals: a summary strip */
    table.m-cards > tfoot > tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 13px 16px; margin-bottom: var(--m-gap); border-radius: 18px; background: rgba(var(--m-tint-rgb), .1) !important; }
    table.m-cards > tfoot > tr > *, .card table.m-cards > tfoot > tr > * { display: block; border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; font-size: 14px !important; font-weight: 700; color: var(--ios-label); }
    table.m-cards > tfoot > tr > *:empty { display: none; }
    table.m-cards > tfoot > tr > *:last-child:not(:empty), table.m-cards > tfoot > tr > .text-end { color: var(--m-tint); font-size: 17px !important; }

    /* Every other wide table scrolls inside its own card */
    html.m-app .table-responsive:not(:has(table.m-cards)) { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 14px; }

    /* ── Pop-ups become bottom sheets ───────────── */
    .modal-dialog:not(.modal-fullscreen) { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 !important; max-width: 100% !important; width: 100%; }
    .modal.fade .modal-dialog { transform: translateY(100%) !important; transition: transform .38s var(--m-spring) !important; }
    .modal.show .modal-dialog { transform: none !important; }
    .modal-dialog .modal-content { border: 0 !important; border-radius: 26px 26px 0 0 !important; max-height: 92dvh; padding-bottom: var(--m-safe-b); overflow: hidden; }
    .modal-dialog .modal-content::before { content: ''; display: block; width: 38px; height: 5px; flex: none; border-radius: 3px; background: var(--ios-label-3, rgba(60, 60, 67, .3)); margin: 8px auto 0; }
    .modal-dialog .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-dialog-centered { min-height: 0 !important; align-items: flex-end !important; }

    html.m-app .dataTables_paginate, html.m-app .pagination { flex-wrap: wrap; justify-content: center; }
    html.m-app .page-link { min-width: 38px; min-height: 38px; display: grid; place-items: center; border-radius: 12px !important; }

    /* ── Dashboards ──────────────────────────────── */
    html.m-app .m-stat-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 10px !important; }
    html.m-app .m-stat-row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none; }
    html.m-app .m-stat-row .card { height: 100%; margin: 0 !important; border-radius: 18px !important; }
    html.m-app .m-stat-row .card-body { padding: 13px !important; }

    html.m-app .exec-kpi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; margin-bottom: 14px; }
    html.m-app .exec-kpi { padding: 13px !important; border-radius: 18px !important; min-width: 0; }
    html.m-app .exec-kpi-label { font-size: 10.5px !important; letter-spacing: .02em !important; line-height: 1.25; overflow-wrap: anywhere; }
    html.m-app .exec-kpi-value { font-size: 1.3rem !important; overflow-wrap: anywhere; }
    html.m-app .exec-kpi-icon { width: 30px !important; height: 30px !important; flex: none; }
    html.m-app .list-group-item.active .fw-medium, html.m-app .list-group-item.active .fw-semibold, html.m-app .list-group-item.active .fw-bold, html.m-app .list-group-item.active h6 { color: inherit !important; }

    /* Dashboards follow the dark theme too */
    html[data-bs-theme="dark"].m-app input:not([type=checkbox]):not([type=radio]), html[data-bs-theme="dark"].m-app select { background-color: var(--ios-input) !important; color: var(--ios-label) !important; color-scheme: dark; }
    html[data-bs-theme="dark"].m-app [class*="exec-"] button:not(.active), html[data-bs-theme="dark"].m-app [class*="exec-"] .btn:not(.active) { background-color: var(--ios-surface-2) !important; color: var(--ios-label) !important; border-color: var(--ios-separator) !important; }
    html[data-bs-theme="dark"] { --exec-bg: #000; --exec-card: #1C1C1E; --exec-border: rgba(84, 84, 88, .55); --exec-text: #F5F5F7; --exec-muted: rgba(235, 235, 245, .62); }

    /* Business Insights: chips scroll sideways, filters share one line */
    html.m-app .bi-seg { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html.m-app .bi-seg::-webkit-scrollbar { display: none; }
    html.m-app .bi-seg button { flex: none; white-space: nowrap; }
    html.m-app .bi-controls { flex-wrap: wrap; }
    html.m-app .bi-filters { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; align-items: center; }
    html.m-app .bi-filters select { flex: 1 1 0; min-width: 0; width: 0; }
    html.m-app .bi-filters .bi-icon { flex: none; }
    html.m-app .bi-tabs { top: calc(var(--m-appbar-h) + var(--m-safe-t) + 6px) !important; z-index: 20; }
    html.m-app .bi-head { padding-top: 0 !important; }

    /* ── Pull to refresh ─────────────────────────── */
    html.m-app .m-ptr { display: grid; place-items: center; position: fixed; top: calc(var(--m-safe-t) + 6px); left: 50%; z-index: 1033; width: 38px; height: 38px; border-radius: 50%; color: var(--ios-label-2); font-size: 20px; background: var(--ios-surface, #fff); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); opacity: 0; transform: translate(-50%, 0); transition: transform .3s var(--m-spring), opacity .2s; pointer-events: none; }
    .m-ptr.ready { color: var(--m-tint); }
    .m-ptr.spin { animation: m-spin .7s linear infinite; }

    /* ── POS: quick to tap, one hand ─────────────── */
    html.m-pos .pos-stage { min-height: 100dvh; padding: 0 !important; margin: 0 !important; }
    html.m-pos .container-xxl, html.m-pos .container-fluid { padding: 0 !important; max-width: none; }
    html.m-pos .pos-app { min-height: 100dvh; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
    html.m-pos .pos-toolbar { padding-top: calc(var(--m-safe-t) + 10px); }
    html.m-pos .pos-categories { position: sticky; top: 118px; z-index: 19; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
    html.m-pos .pos-categories::-webkit-scrollbar { display: none; }
    html.m-pos .pos-pill { flex: none; min-height: 38px; }
    html.m-pos .pos-grid-wrap { padding-bottom: 110px; }
    html.m-pos .pos-search__scan { width: 42px !important; height: 38px !important; border-radius: 11px !important; font-size: 22px; }
    html.m-pos .pos-search input { font-size: 16px !important; }
    html.m-pos .pos-card { -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: transform .1s; }
    html.m-pos .pos-card:active { transform: scale(.95); }
    html.m-pos .pos-card.in-cart { box-shadow: 0 0 0 2px var(--m-tint) !important; }
    html.m-pos .pos-card__minus { display: none; }
    html.m-pos .pos-card.in-cart .pos-card__price { display: none; }
    html.m-pos .pos-card.in-cart .pos-card__price-row { justify-content: space-between; }
    html.m-pos .pos-card.in-cart .pos-card__minus { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 8px; color: var(--m-tint); background: rgba(var(--m-tint-rgb), .13); }
    html.m-pos .pos-card__add { width: 30px !important; height: 28px !important; border-radius: 8px !important; }
    html.m-pos .pos-sticky-cart:not([style*="none"]) { display: flex !important; }
    html.m-pos .pos-sticky-cart { gap: 8px; padding: 10px 12px calc(10px + var(--m-safe-b)) !important; background: var(--pos-bg, #f6f5f2) !important; z-index: 30; }
    html.m-pos .pos-sticky-cart__btn { flex: 1; min-width: 0; height: 56px; padding: 0 12px; }
    html.m-pos .pos-sticky-cart__btn > span:last-child { font-size: 0 !important; }
    html.m-pos .pos-sticky-cart__btn > span:last-child i { font-size: 18px !important; }
    html.m-pos .pos-sticky-cart__charge { flex: none; height: 56px; padding: 0 22px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 750; color: #fff; background: #F26A35; box-shadow: 0 8px 18px rgba(var(--m-tint-rgb), .35); }
    html.m-pos .pos-sticky-cart__charge:active { transform: scale(.96); }
    .pos-backdrop .pos-sheet { max-height: min(92dvh, var(--m-vh, 92dvh)) !important; overflow: auto; overscroll-behavior: contain; }
    .pos-backdrop .icon-btn { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: var(--ios-fill, rgba(120, 120, 128, .12)) !important; }
    .pos-backdrop .pos-sheet input, .pos-backdrop .pos-sheet select { font-size: 16px !important; }
    .pos-backdrop--sub { background: rgba(10, 8, 20, .35) !important; }
    .m-pos-exit { flex: none; align-self: center; margin-left: auto; padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--m-tint); background: rgba(var(--m-tint-rgb), .12); text-decoration: none; }
    .pos-backdrop[data-sheet="shift-open"] .pos-sheet__head { display: flex; align-items: flex-start; gap: 10px; }

    /* ── POS: its own full-screen app ───────────── */
    html.m-pos .m-tabbar, html.m-pos .m-appbar, html.m-pos .m-largetitle, html.m-pos .m-savebar { display: none !important; }
    html.m-app.m-pos body { padding-bottom: 0; }
    html.m-app.m-pos .layout-page { padding-top: 0 !important; }

    /* ── Login: brand hero with the form on a sheet ── */
    .authentication-cover { min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #F26A35 !important; }
    .authentication-cover::before, .authentication-cover::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
    .authentication-cover::before { width: 260px; height: 260px; top: -90px; right: -70px; }
    .authentication-cover::after { width: 150px; height: 150px; top: 130px; left: -60px; }
    .authentication-cover .auth-cover-brand { position: relative !important; inset: auto !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1 0 200px; margin: 0 !important; padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px 22px !important; pointer-events: none; animation: m-rise .6s var(--m-spring) both; z-index: 1; }
    .authentication-cover .auth-cover-brand .app-brand-logo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px rgba(110, 30, 0, .22); }
    .authentication-cover .auth-cover-brand .text-primary { color: #fff !important; display: grid; }
    .authentication-cover .auth-cover-brand svg { width: 44px; height: 30px; color: #fff !important; }
    .authentication-cover .auth-cover-brand svg path { fill: #fff !important; }
    .authentication-cover .auth-cover-brand svg path[opacity] { display: none; }
    .authentication-cover .auth-cover-brand .app-brand-text { color: #fff !important; font-size: 27px; font-weight: 750; letter-spacing: -.03em; margin: 0 !important; }
    .authentication-cover .authentication-inner { flex: 0 0 auto; width: 100%; margin: 0 !important; position: relative; z-index: 1; background: var(--bs-paper-bg, #fff); border-radius: 30px 30px 0 0; box-shadow: 0 -14px 40px rgba(110, 30, 0, .2); animation: m-rise .55s .06s var(--m-spring) both; }
    .authentication-cover .authentication-inner, .authentication-cover .authentication-bg { min-height: 0 !important; height: auto !important; }
    .authentication-cover .authentication-bg { padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important; }
    .authentication-cover .w-px-400 { margin-top: 0 !important; padding-top: 0 !important; width: 100% !important; }
    .authentication-cover h4 { font-size: 25px; font-weight: 750; letter-spacing: -.03em; }
    .authentication-cover .form-control { min-height: 50px; border-radius: 14px; font-size: 16px; }
    .authentication-cover .input-group-merge .form-control { border-radius: 14px 0 0 14px; }
    .authentication-cover .input-group-text { border-radius: 0 14px 14px 0 !important; }
    .authentication-cover #loginForm_submit { height: 54px; display: flex !important; align-items: center; justify-content: center; border: 0; border-radius: 16px; font-size: 17px; font-weight: 700; background: #F26A35 !important; box-shadow: 0 10px 22px rgba(242, 106, 53, .38) !important; }
    .authentication-cover #loginForm_submit:active { transform: scale(.98); }
    .authentication-cover .my-8 { margin: 18px 0 !important; }
    .authentication-cover form.mb-6 { margin-bottom: 8px !important; }
    /* Placeholder links from the template: nothing behind them yet */
    .authentication-cover a[href="javascript:;"], .authentication-cover a[href^="auth-forgot"], .authentication-cover p.text-center:has(a[href^="auth-register"]) { display: none !important; }
    .authentication-cover .divider { margin: 14px 0 !important; }

    /* ── PWA banners sit above the tab bar ───────── */
    #pwa-install-banner > div { left: 12px !important; right: 12px !important; max-width: none !important; bottom: calc(var(--m-tabbar-h) + var(--m-safe-b) + 22px) !important; }
    #pwa-update-banner > div { white-space: normal !important; width: calc(100% - 24px); bottom: calc(var(--m-tabbar-h) + var(--m-safe-b) + 22px) !important; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* One record's full detail: label on the left, value on the right */
@media (max-width: 767.98px) {
    .m-kv-sub { display: block; margin-top: 1px; font-size: 12px; color: var(--ios-label-2, rgba(60, 60, 67, .62)); }
    .m-kv-list { margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--ios-surface, #fff); }
    .m-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 13px; font-size: 14px; box-shadow: inset 0 -.5px 0 var(--ios-separator, rgba(60, 60, 67, .13)); }
    .m-kv:last-child { box-shadow: none; }
    .m-kv span { flex: 0 1 46%; min-width: 0; font-size: 13px; color: var(--ios-label-2, rgba(60, 60, 67, .62)); }
    .m-kv b { flex: 1; min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: var(--ios-label, #1c1c1e); }
    .m-kv-note { font-size: 13.5px; color: var(--ios-label-2, rgba(60, 60, 67, .62)); }
}