/* ============================================================================
 * HBERP Mobile UI Layer
 * ----------------------------------------------------------------------------
 * Loaded AFTER modern-theme.css. Every rule lives inside a max-width media
 * query. Desktop (>= 768px) is intentionally untouched: deleting this file
 * restores today's behavior on every device.
 *
 * See "mobile design system.md" for the spec this implements.
 * ==========================================================================*/

/* ------------------------------------------------------------------ tokens */
@media screen and (max-width: 767px) {
    :root {
        --m-space-1: 4px;
        --m-space-2: 8px;
        --m-space-3: 12px;
        --m-space-4: 16px;
        --m-tap-min: 44px;      /* minimum touch target */
        --m-font-body: 14px;
        --m-font-label: 11px;   /* card field labels, uppercase */
        --m-font-value: 14px;
        --m-font-title: 16px;   /* card primary line */
        --m-card-gap: 10px;
        --m-header-height: 52px;
        --m-bottom-nav-height: 58px;
    }
}

/* ============================================================ 6.1 CARDS */
@media screen and (max-width: 767px) {
    /* Kill sliver-scroll ONLY for converted tables (JS adds .m-has-cards to
       the scroll container). Unconverted wide tables keep their scroll box so
       they don't overflow the page. Class-based, so no :has() dependency and
       it survives DataTables wrapping the table in .dataTables_wrapper. */
    .table-responsive.m-has-cards {
        border: 0;
        overflow-x: visible;
    }

    /* Force the card table itself to block-level, full width. Otherwise it
       stays display:table and sizes to content — wider than the screen — which
       pushes right-hand cells (e.g. the ledger balance) off the edge. */
    .table.mobile-cards,
    .table.mobile-cards > tbody {
        display: block;
        width: 100%;
    }

    .table.mobile-cards thead {
        display: none;
    }

    .table.mobile-cards > tbody > tr {
        display: flex;          /* flex column so per-view polish can reorder
                                   cells via `order` (title first, actions last) */
        flex-direction: column;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--m-card-gap);
        padding: var(--m-space-3);
    }

    .table.mobile-cards > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--m-space-3);
        border: 0 !important;
        padding: 6px 0;
        font-size: var(--m-font-value);
        white-space: normal;
        text-align: right;
    }

    /* Label from markup: <td data-label="Grand Total"> (auto-injected by JS) */
    .table.mobile-cards > tbody > tr > td::before {
        content: attr(data-label);
        font-size: var(--m-font-label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
        flex-shrink: 0;
        text-align: left;
    }

    /* Cells opted out of a label (serial no, action row, etc.) */
    .table.mobile-cards > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    /* Empty-state / "no records" single cell spanning full width */
    .table.mobile-cards > tbody > tr > td.dataTables_empty {
        justify-content: center;
        text-align: center;
    }

    /* Hide a column on mobile: add class m-hide to matching th/td */
    .table.mobile-cards .m-hide {
        display: none !important;
    }

    /* Due / status emphasis */
    .table.mobile-cards td.m-due-pos {
        color: #d63031;
        font-weight: 700;
    }

    /* --- per-view card polish hooks (opt-in classes added in the view) --- */

    /* Primary line of the card (e.g. customer name): big, bold, no label */
    .table.mobile-cards > tbody > tr > td.m-card-title {
        order: -3;
        justify-content: flex-start;
        font-size: var(--m-font-title);
        font-weight: 700;
        color: var(--text-color);
        padding-bottom: 2px;
    }
    .table.mobile-cards > tbody > tr > td.m-card-title::before {
        display: none;
    }

    /* Secondary line under the title (e.g. invoice no + date): no label */
    .table.mobile-cards > tbody > tr > td.m-card-sub {
        order: -2;
        justify-content: flex-start;
        gap: var(--m-space-2);
        color: var(--text-light);
        padding-top: 0;
    }
    .table.mobile-cards > tbody > tr > td.m-card-sub::before {
        display: none;
    }

    /* Actions always sit at the bottom of the card */
    .table.mobile-cards > tbody > tr > td.m-actions {
        order: 99;
    }
}

/* ==================================================== 6.2 ACTION BUTTONS */
@media screen and (max-width: 767px) {
    .table.mobile-cards > tbody > tr > td.m-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--m-space-2);
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        margin-top: var(--m-space-2);
        padding-top: var(--m-space-2);
    }

    .table.mobile-cards > tbody > tr > td.m-actions::before {
        display: none;
    }

    /* Buttons are often wrapped in <center>/<form>; flatten so the buttons
       themselves become flex items (enables gap + delete-left ordering). */
    .table.mobile-cards > tbody > tr > td.m-actions center,
    .table.mobile-cards > tbody > tr > td.m-actions form {
        display: contents;
    }
    .table.mobile-cards > tbody > tr > td.m-actions br {
        display: none;
    }

    .table.mobile-cards > tbody > tr > td.m-actions .btn {
        min-width: var(--m-tap-min);
        min-height: var(--m-tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* Delete pushed left, away from edit, to avoid fat-finger deletes */
    .table.mobile-cards > tbody > tr > td.m-actions .btn-danger {
        margin-right: auto;
        order: -1;
    }
}

/* ============================================= 6.3 FILTERS & DT CHROME */
@media screen and (max-width: 767px) {
    /* Export buttons + length selector: desktop workflow, hide on mobile */
    .dt-buttons,
    .dataTables_length {
        display: none !important;
    }

    /* DataTables search: full width, 16px to stop iOS zoom */
    .dataTables_filter {
        float: none;
        text-align: left;
        width: 100%;
    }
    .dataTables_filter label {
        display: block;
        width: 100%;
    }
    .dataTables_filter input {
        width: 100% !important;
        margin: 0 !important;
        height: var(--m-tap-min);
        font-size: 16px;
    }

    /* Pagination: Prev / current / Next only */
    .dataTables_paginate .paginate_button {
        min-width: var(--m-tap-min);
        min-height: var(--m-tap-min);
        padding: 8px 12px !important;
    }
    .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.current) {
        display: none;
    }
    .dataTables_paginate .ellipsis {
        display: none;
    }
    .dataTables_info {
        display: none;
    }

    /* Collapsible filter wrapper (see auto-collapse JS in admin_footer) */
    .m-filter-toggle {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: var(--m-space-2);
        min-height: var(--m-tap-min);
    }
    .m-filter-collapsed {
        display: none !important;
    }
}

/* ============================ 6.35 PRINT BUTTONS (hidden on mobile) */
@media screen and (max-width: 767px) {
    /* Printing is a desktop/printer task — hide every print trigger on phone.
       Reliable, no :has() dependency: onclick handlers + known classes. */
    [onclick*="printDiv"],
    [onclick*="printReport"],
    [onclick*="window.print"],
    .manage-print-btn,
    .buttons-print,
    .dt-button.buttons-print {
        display: none !important;
    }
}

/* Progressive: also hide any button whose only content is a print icon.
   Isolated so browsers without :has() still apply the block above. */
@media screen and (max-width: 767px) {
    .btn:has(.fa-print),
    a:has(> .fa-print),
    button:has(> .fa-print) {
        display: none !important;
    }
    a.btn.m-receipt-print {
        display: inline-flex !important;
    }
}

/* ================================= 6.4 PAGE HEADER & PRIMARY ACTIONS */
@media screen and (max-width: 767px) {
    .content-header {
        margin: 10px;
        padding: 15px !important;
    }
    /* Primary page actions: compact chips. Full-width action tiles were
       visually heavy on shop phones and pushed content too far down. */
    .m-primary-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--m-space-2);
        margin-bottom: var(--m-space-2);
    }
    .m-primary-actions .btn {
        width: auto;
        max-width: 100%;
        margin: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        border-radius: 10px;
    }
    .m-primary-actions {
        width: fit-content;
        max-width: 100%;
    }
    .m-primary-actions .btn {
        min-height: 36px;
        padding: 7px 10px !important;
        font-size: 11px;
    }
}

@media screen and (max-width: 575px) {
    .breadcrumb {
        display: none;
    }
    .content-header h1 {
        font-size: 1.25rem;
    }
}

/* ====================================== 6.5 NAVBAR & SIDEBAR (touch) */

/* .m-navstrip wraps the quick-action buttons. display:contents on desktop =
   no visual change (buttons act as direct navbar children as before). */
.m-navstrip {
    display: contents;
}

.m-mobile-brand,
.m-quick-trigger,
.m-reload-trigger {
    display: none;
}

@media screen and (max-width: 767px) {
    .main-header .logo {
        display: none;
    }

    .navbar.navbar-static-top {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-height: var(--m-header-height);
        padding: 0 var(--m-space-2);
        position: relative;
    }

    .navbar.navbar-static-top .sidebar-toggle {
        flex: 0 0 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .m-mobile-brand {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 var(--m-space-2);
        color: #263238;
        font-size: 16px;
        font-weight: 700;
        line-height: var(--m-header-height);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-quick-trigger {
        display: block;
        flex: 0 0 44px;
        width: 36px;
        min-height: 36px;
        margin-right: 4px;
        border: 1px solid rgba(36, 129, 204, 0.2);
        border-radius: 8px;
        background: rgba(36, 129, 204, 0.08);
        color: var(--primary-color);
        font-size: 17px;
        line-height: 34px;
    }

    .m-reload-trigger {
        display: block;
        flex: 0 0 44px;
        width: 36px;
        min-height: 36px;
        margin-right: 4px;
        border: 1px solid rgba(245, 124, 0, 0.25);
        border-radius: 8px;
        background: rgba(245, 124, 0, 0.1);
        color: #ef6c00;
        font-size: 16px;
        line-height: 34px;
    }

    .navbar.navbar-static-top .navbar-custom-menu {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .m-navstrip {
        display: none;
        position: absolute;
        top: var(--m-header-height);
        left: var(--m-space-2);
        right: var(--m-space-2);
        z-index: 1040;
        grid-template-columns: 1fr 1fr;
        gap: var(--m-space-2);
        padding: var(--m-space-2);
        background: #fff;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        white-space: normal;
        box-sizing: border-box;
    }

    .m-navstrip.m-open {
        display: grid;
    }

    .m-navstrip *,
    .m-navstrip *::before,
    .m-navstrip *::after {
        box-sizing: border-box;
    }

    .navbar.navbar-static-top .btn-success {
        width: 100%;
        min-width: 0;
        min-height: var(--m-tap-min);
        margin: 0;
        padding: 8px 10px;
        border-color: var(--glass-border);
        background: #fff;
        color: var(--text-color);
        font-size: 13px;
        text-align: left;
    }

    .navbar.navbar-static-top .btn-success i {
        margin-right: 6px;
        color: var(--primary-color);
    }

    /* Sidebar menu links reach 44px touch height */
    .sidebar-menu > li > a,
    .treeview-menu > li > a {
        min-height: var(--m-tap-min);
        display: flex;
        align-items: center;
    }
}

/* ============================================================ 6.6 FORMS */
@media screen and (max-width: 767px) {
    .form-control,
    .select2-container .select2-selection--single,
    .input-group .form-control {
        min-height: var(--m-tap-min);
        font-size: 16px; /* prevents iOS Safari auto-zoom */
    }
    .select2-container .select2-selection--single {
        height: var(--m-tap-min) !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 32px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }
    .form-group.row {
        margin-left: 0;
        margin-right: 0;
    }
    .form-group.row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    #payment_from_1 .form-group.row,
    #payment_from .form-group.row {
        margin-bottom: var(--m-space-3);
    }
}

@media screen and (max-width: 575px) {
    /* Collapse multi-column FORM rows to single column.
       Scoped to .form-group only — do not flatten col-xs-* globally
       (stat boxes and POS grids rely on them). */
    .form-group [class*="col-xs-"] {
        width: 100%;
    }
}

/* ================================= 6.65 ENTRY FORMS (add receipt/payment)
   .m-entry-row rows collapse behind their own labeled toggle (see
   setupEntryCollapse in admin_footer). Everything below is mobile-only
   polish for comfortable one-hand entry: 48px touch targets, stacked
   labels, full-width primary submit. Desktop untouched. */
@media screen and (max-width: 767px) {
    /* The dedicated "Add Receipt / Add Payment" toggle button */
    .m-entry-toggle {
        display: block;
        width: 100%;
        text-align: left;
        padding-left: 14px;
        margin-bottom: var(--m-space-2);
        min-height: 48px;
        font-size: var(--m-font-title);
        font-weight: 600;
    }
    .m-entry-collapsed {
        display: none !important;
    }

    /* Page-top quick-action buttons on ENTRY pages only (.m-entry-page is
       set by setupEntryCollapse). Elsewhere the compact .m-primary-actions
       pill row stays as-is -- multi-button manage screens would become an
       ugly tall stack. Here there are only one or two nav buttons, so
       matching the Add/Filters toggle geometry makes the page header read
       as one consistent stack instead of three mismatched widths.
       Overrides .m-primary-actions width:fit-content, hence the extra
       class in the selector. */
    .content.m-entry-page .m-primary-actions {
        width: 100%;
        max-width: 100%;
        display: block;
    }
    .content.m-entry-page .m-primary-actions .btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        margin: 0 0 var(--m-space-2) 0;
        padding: 8px 14px !important;
        font-size: var(--m-font-title);
        font-weight: 600;
        border-radius: 10px;
    }
    .content.m-entry-page .m-primary-actions .btn i {
        margin-right: 8px;
    }

    /* ---- Visual hierarchy: only ONE filled control per screen ----
       The form's SUBMIT commits data, so it keeps the solid green fill.
       These page-top controls step down to avoid competing with it:
         Add Receipt / Add Payment -> tinted (accent, but quiet)
         Manage Transaction        -> neutral surface (navigation)
         Filters                   -> neutral surface (tertiary)
       Also drops the theme's uppercase + letter-spacing, which is what
       made two stacked green blocks read as shouting. */
    .content.m-entry-page .m-primary-actions .btn,
    .content.m-entry-page .m-entry-toggle,
    .content.m-entry-page .m-filter-toggle {
        text-transform: none;
        letter-spacing: 0;
        font-size: 15px;
        font-weight: 600;
        box-shadow: none !important;
        overflow: visible;
    }

    /* Primary-adjacent: tinted, not filled */
    .content.m-entry-page .m-entry-toggle {
        background: rgba(76, 175, 80, 0.12) !important;
        border: 1px solid rgba(76, 175, 80, 0.24) !important;
        color: var(--primary-dark, #388E3C) !important;
    }

    /* Navigation + tertiary: neutral, recedes */
    .content.m-entry-page .m-primary-actions .btn,
    .content.m-entry-page .m-filter-toggle {
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: var(--text-color, #2d3436) !important;
    }
    .content.m-entry-page .m-primary-actions .btn i,
    .content.m-entry-page .m-filter-toggle i {
        color: var(--text-light, #636e72);
    }

    /* Kill the theme's lift-on-hover: on touch it fires after tap and
       reads as drift. Feedback belongs on press instead (below). */
    .content.m-entry-page .m-primary-actions .btn:hover,
    .content.m-entry-page .m-primary-actions .btn:focus {
        transform: none;
        box-shadow: none !important;
    }

    /* Response: feedback on pointer-DOWN, not on release */
    .content.m-entry-page .m-primary-actions .btn:active,
    .content.m-entry-page .m-entry-toggle:active,
    .content.m-entry-page .m-filter-toggle:active {
        transform: scale(0.98);
        transition: transform 100ms ease-out;
    }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .content.m-entry-page .m-primary-actions .btn:active,
    .content.m-entry-page .m-entry-toggle:active,
    .content.m-entry-page .m-filter-toggle:active {
        transform: none;
    }
}

/* Higher-contrast preference: solid surfaces, defined borders */
@media screen and (max-width: 767px) and (prefers-contrast: more) {
    .content.m-entry-page .m-entry-toggle {
        background: #E8F5E9 !important;
        border-color: var(--primary-dark, #388E3C) !important;
    }
    .content.m-entry-page .m-primary-actions .btn,
    .content.m-entry-page .m-filter-toggle {
        background: #fff !important;
        border-color: rgba(0, 0, 0, 0.45) !important;
    }
}

/* Entry-form layout. NOTE: this must be its own plain mobile query -- it was
   previously swallowed by the prefers-contrast block above, so the gutter and
   label rules only applied in high-contrast mode. */
@media screen and (max-width: 767px) {
    /* Labels stack above their inputs, full row width.
       Spacing is asymmetric on purpose: a label belongs to the field BELOW
       it, so it sits close to its own control and far from the previous
       one. Equal spacing above and below is what made the labels look
       glued to the field above them. */
    .m-entry-row .col-form-label {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0;
        margin: 0 0 6px 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-color, #2d3436);
    }
    /* Gap between one field and the next label */
    .m-entry-row .form-group.row {
        margin-bottom: 20px;
    }
    /* Nested wrapper rows (#PaymentContainer1/2) are separate fields inside
       one .form-group, so they need that same separation. */
    .m-entry-row .form-group.row > div:not([class*="col-"]) + div:not([class*="col-"]),
    .m-entry-row .form-group.row > [class*="col-sm-"] + div:not([class*="col-"]) {
        margin-top: 20px;
    }
    /* Descendant (not child) selectors: the amount fields sit inside extra
       wrapper divs (#PaymentContainer1/2), so with `>` those nested cols
       kept Bootstrap's 15px gutters -- that was the "Receipt Amount is
       indented and narrower" bug. Flatten every col in the entry form,
       however deeply it is wrapped. */
    .m-entry-row .form-group.row [class*="col-sm-"] {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* Bare wrapper divs between the row and its cols stack full width too */
    .m-entry-row .form-group.row > div:not([class*="col-"]) {
        width: 100%;
    }
    /* Spacer labels (e.g. the empty label before Submit) just add a gap */
    .m-entry-row .col-form-label:empty {
        display: none;
    }

    /* Inputs: comfortable 48px targets (16px font stops iOS zoom) */
    .m-entry-row .form-control,
    .m-entry-row select.form-control {
        min-height: 48px;
        font-size: 16px;
    }
    .m-entry-row textarea.form-control {
        min-height: 72px;
    }
    .m-entry-row .select2-container .select2-selection--single {
        height: 48px !important;
    }
    .m-entry-row .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        font-size: 16px;
    }
    .m-entry-row .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
    }

    /* Payment / Receipt segmented toggle: two equal half-width buttons */
    .m-entry-row .toggle-switch {
        display: flex;
        width: 100%;
        gap: var(--m-space-2);
    }
    .m-entry-row .toggle-option {
        flex: 1;
        justify-content: center;
        min-height: 48px;
        padding: 10px 8px;
    }

    /* Primary submit: full-width, unmissable */
    .m-entry-row input[type="submit"],
    .m-entry-row button[type="submit"] {
        display: block;
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        font-weight: 600;
    }
}

/* ------------------- select2 dropdown (attaches to <body>, so these
   rules cannot be scoped under .m-entry-row) ------------------- */
@media screen and (max-width: 767px) {
    /* The type-to-search box inside an open select2 dropdown. Give it an
       explicit clean style so no theme/validation rule can paint it the
       unreadable solid-orange seen on phones. */
    .select2-container--default .select2-search--dropdown .select2-search__field,
    .select2-search__field {
        min-height: 44px;
        font-size: 16px;
        padding: 8px 12px;
        background: #fff !important;
        border: 1px solid #c8e6c9 !important;
        border-radius: 6px;
        box-shadow: none !important;
        color: #333 !important;
        outline: none;
    }
    /* Result rows become real touch targets */
    .select2-results__option {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        font-size: 15px;
    }
    .select2-results > .select2-results__options {
        max-height: 45vh; /* keyboard leaves room; list stays scrollable */
    }
}

/* =========================================================== 6.7 MODALS */
@media screen and (max-width: 767px) {
    .modal-dialog {
        margin: 8px;
        width: auto;
    }
    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
    .modal-footer .btn {
        min-height: var(--m-tap-min);
    }
}

/* ====================================== 6.8 DASHBOARD STAT / CHARTS */
@media screen and (max-width: 767px) {
    .chart-container { height: 220px; }
    .statistic-box h2 {
        font-size: 1.5rem;
    }
    .content > .row > [class*="col-"] {
        margin-bottom: var(--m-space-2);
    }
    .stat-card-modern {
        margin-bottom: var(--m-space-2) !important;
    }
    .stat-card-modern .panel-body {
        min-height: 0;
    }
    [id^="sparkline-"] {
        min-height: 46px;
    }
    #salesPurchaseTrendChart,
    #bestProductsChart,
    #weeklyPerformanceChart {
        height: 240px !important;
        min-height: 240px;
    }
    #revenueBreakdownChart {
        height: 220px !important;
        min-height: 220px;
    }
    .content > .row > .col-xs-12.col-sm-6.col-md-6.col-lg-3,
    .content > .row > .col-xs-12.col-sm-6.col-md-3 {
        width: 50%;
        float: left;
    }
}

/* ============================== 6.9 LIST-PAGE FIXES (tfoot, floats) */
@media screen and (max-width: 767px) {
    .table.mobile-cards.m-footer-hide tfoot {
        display: none;
    }

    .table.mobile-cards.m-footer-summary > tfoot,
    .table.mobile-cards.m-footer-stack > tfoot {
        display: block;
        width: 100%;
    }

    .table.mobile-cards.m-footer-summary > tfoot > tr,
    .table.mobile-cards.m-footer-stack > tfoot > tr,
    .m-summary-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px var(--m-space-3);
        margin-top: var(--m-card-gap);
        padding: var(--m-space-3);
        background: linear-gradient(135deg, var(--primary-lighter) 0%, rgba(76,175,80,0.12) 100%);
        border: 1px solid var(--primary-light);
        border-radius: var(--radius-md);
    }

    .table.mobile-cards.m-footer-summary > tfoot td,
    .table.mobile-cards.m-footer-stack > tfoot td,
    .m-summary-footer > * {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border: 0 !important;
        padding: 2px 0;
        font-size: 13px;
    }

    .table.mobile-cards.m-footer-summary > tfoot td[colspan],
    .table.mobile-cards.m-footer-stack > tfoot td[colspan],
    .m-summary-label {
        grid-column: 1 / -1;
        justify-content: flex-start;
        font-weight: 700;
    }

    .table.mobile-cards.m-footer-summary > tfoot td::before,
    .table.mobile-cards.m-footer-stack > tfoot td::before {
        content: attr(data-label);
        font-size: var(--m-font-label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
        margin-right: var(--m-space-2);
    }

    .table.mobile-cards.m-footer-summary > tfoot td[data-label=""]::before,
    .table.mobile-cards.m-footer-stack > tfoot td[data-label=""]::before,
    .m-summary-label::before {
        display: none;
    }

    .m-summary-value,
    .m-summary-primary {
        font-weight: 700;
        color: var(--text-color);
    }

    .m-summary-primary {
        grid-column: 1 / -1;
        border-top: 1px solid var(--primary-light) !important;
        margin-top: 4px;
        padding-top: 6px;
        color: var(--primary-dark);
        font-size: 1.15rem;
    }

    /* Panels that use float:left / float:right for a two-up info layout
       (e.g. customer info + balance summary) must stack on a phone. */
    .panel-body [style*="float"] {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    /* Small summary tables inside info panels: full width, no stray margins */
    .panel-body > table,
    .panel-body [style*="float"] > table {
        width: 100% !important;
        margin: var(--m-space-3) 0 0 0 !important;
    }
}

/* =============================== 6.10 CARD VALUE COLOR PASSTHROUGH */
@media screen and (max-width: 767px) {
    /* Ledgers color the value with inline color on the <td> (red/blue/green).
       Keep that color on the value text; the label stays muted grey. */
    .table.mobile-cards > tbody > tr > td[style*="color"] {
        font-weight: 600;
    }
}

/* ============================ 6.11 DATA-ENTRY TABLES (.m-entry) */
/* Invoice / purchase / POS line-item forms. tbody rows = editable field
   cards; tfoot (totals + Submit) stays visible and stacks. See §6.6.1. */
@media screen and (max-width: 767px) {
    /* The <table> stays display:table by default and sizes to content, so
       width:100% inputs resolve against the wrong box and overflow right.
       Force the whole entry table to block-level, full width. */
    .table.m-entry,
    .table.m-entry > tbody,
    .table.m-entry > tfoot {
        display: block;
        width: 100%;
    }
    .table.m-entry thead {
        display: none;
    }
    .table.m-entry > tbody > tr {
        display: block;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--m-card-gap);
        padding: var(--m-space-3);
    }
    .table.m-entry > tbody > tr > td,
    .table.m-entry > tfoot > tr > td {
        display: block;
        width: auto;
        border: 0 !important;
        padding: 6px 0;
        text-align: left;
    }
    .table.m-entry > tbody > tr > td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--m-font-label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
        margin-bottom: 4px;
    }
    .table.m-entry > tbody > tr > td[data-label=""]::before,
    .table.m-entry > tfoot td::before {
        display: none;
    }
    .table.m-entry .form-control,
    .table.m-entry textarea.form-control {
        width: 100% !important;
        min-height: var(--m-tap-min);
        font-size: 16px;
    }
    .table.m-entry .btn {
        width: 100%;
        min-height: var(--m-tap-min);
        margin: 4px 0;
        text-align: center;
    }
    /* Totals + Submit block: separated from the item cards, stacked */
    .table.m-entry > tfoot {
        display: block;
        border-top: 2px solid var(--glass-border);
        margin-top: var(--m-space-2);
        padding-top: var(--m-space-2);
    }
    .table.m-entry > tfoot > tr {
        display: block;
        padding: 2px 0;
    }
}

/* ================================= 6.12 LEDGER (.m-ledger) */
/* Statement layout: running BALANCE is the hero. Overrides the generic card
   the labeler applied (hence the extra .m-ledger specificity). See §6.6.2. */
@media screen and (max-width: 767px) {
    .table.mobile-cards.m-ledger > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: var(--m-space-3);
        row-gap: 2px;
        align-items: start;
    }
    /* description = title, top-left */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-card-title {
        grid-column: 1;
        grid-row: 1;
        font-size: 15px;
        font-weight: 700;
        justify-content: flex-start;
        text-align: left;
        padding: 0;
    }
    .table.mobile-cards.m-ledger > tbody > tr > td.m-card-title::before {
        display: none;
    }
    /* movement value = top-right, balance = below it. */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-bal {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }
    .table.mobile-cards.m-ledger > tbody > tr > td.m-bal::before {
        content: "Balance";
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
    }
    /* date = sub, bottom-left */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-card-sub {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
        color: var(--text-light);
        justify-content: flex-start;
        text-align: left;
        padding: 0;
    }
    .table.mobile-cards.m-ledger > tbody > tr > td.m-card-sub::before {
        display: none;
    }
    /* debit / credit = movement, right side, larger than balance */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-debit,
    .table.mobile-cards.m-ledger > tbody > tr > td.m-credit {
        grid-column: 2;
        justify-content: flex-end;
        font-size: 15px;
        font-weight: 800;
        padding: 0;
        white-space: nowrap;
    }
    /* debit and credit never coexist in one entry, so both sit on row 1;
       the empty side collapses to zero, avoiding a tall gap. */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-debit { grid-row: 1; }
    .table.mobile-cards.m-ledger > tbody > tr > td.m-credit { grid-row: 1; }
    .table.mobile-cards.m-ledger > tbody > tr > td.m-debit::before,
    .table.mobile-cards.m-ledger > tbody > tr > td.m-credit::before {
        display: none;
    }
    /* actions full width at bottom */
    .table.mobile-cards.m-ledger > tbody > tr > td.m-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: var(--m-space-2);
    }
    /* opening-balance row keeps its highlight, still grid */
    .table.mobile-cards.m-ledger > tbody > tr[style*="f0f8ff"] {
        background: #eef5ff;
    }

    /* Closing-balance footer (like the desktop grand-total row). tfoot is
       hidden for generic cards (§6.9) but the ledger keeps it, restyled as a
       summary bar with the closing balance as the hero. */
    .table.mobile-cards.m-ledger > tfoot {
        display: block;
    }
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: var(--m-card-gap);
        padding: var(--m-space-3);
        background: linear-gradient(135deg, var(--primary-lighter) 0%, rgba(76,175,80,0.12) 100%);
        border: 1px solid var(--primary-light);
        border-radius: var(--radius-md);
    }
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border: 0 !important;
        padding: 2px 0;
        font-size: 13px;
        min-width: 0;
    }
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td::before {
        content: attr(data-label);
        font-size: var(--m-font-label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-light);
    }
    /* the "Grand Total:" text cell spans the top as a heading */
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td.m-foot-label {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: 14px;
        justify-content: flex-start;
    }
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td.m-foot-debit,
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td.m-foot-credit {
        grid-column: 1 / -1;
    }
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td.m-foot-label::before {
        display: none;
    }
    /* closing balance = hero of the footer */
    .table.mobile-cards.m-ledger > tfoot > tr.m-foot > td.m-foot-bal {
        grid-column: 1 / -1;
        border-top: 1px solid var(--primary-light) !important;
        margin-top: 4px;
        padding-top: 6px;
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--primary-dark);
    }
}

/* ============================ 6.13 TAP A CARD TO REVEAL ACTIONS */
@media screen and (max-width: 767px) {
    /* Row action buttons are hidden to keep lists clean; tapping the card
       body reveals them (JS toggles .m-open). Real links/buttons still work. */
    .table.mobile-cards > tbody > tr {
        cursor: pointer;
    }
    .table.mobile-cards > tbody > tr > td.m-actions {
        display: none;
    }
    .table.mobile-cards > tbody > tr.m-open > td.m-actions {
        display: flex;
    }
    /* tiny affordance so users know a card is tappable */
    .table.mobile-cards > tbody > tr:not(.m-open) > td.m-card-title::after {
        content: "\203A";            /* › */
        margin-left: auto;
        padding-left: 8px;
        color: var(--text-light);
        font-size: 18px;
        line-height: 1;
    }
}

/* ============================ 6.14 INVOICE MANAGE POLISH */
@media screen and (max-width: 767px) {
    .table.mobile-cards.m-invoice-list > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px var(--m-space-3);
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-card-title {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
        padding: 0 0 2px 0;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-card-title a {
        color: var(--text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-no,
    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-date {
        color: var(--text-light);
        font-size: 12px;
        padding: 0 0 var(--m-space-2) 0;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-no {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-date {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-no::before,
    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-invoice-date::before {
        display: none;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-money,
    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-due-pos,
    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-credit-bill {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-grand-total {
        font-weight: 700;
        color: var(--text-color);
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-credit-bill {
        justify-content: flex-start;
        gap: var(--m-space-2);
        border-top: 0 !important;
        padding-top: 0;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-credit-bill::before {
        content: "";
        display: none;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-credit-bill strong {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(33, 150, 243, 0.12);
        color: #1565c0;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table.mobile-cards.m-invoice-list > tbody > tr > td.m-actions {
        grid-column: 1 / -1;
    }
}

/* ============================ 6.15 FIRST-WAVE LIST POLISH */
@media screen and (max-width: 767px) {
    .table.mobile-cards.m-purchase-list > tbody > tr,
    .table.mobile-cards.m-customer-list > tbody > tr,
    .table.mobile-cards.m-product-list > tbody > tr,
    .table.mobile-cards.m-stock-report > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px var(--m-space-3);
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td,
    .table.mobile-cards.m-customer-list > tbody > tr > td,
    .table.mobile-cards.m-product-list > tbody > tr > td,
    .table.mobile-cards.m-stock-report > tbody > tr > td {
        grid-column: 1 / -1;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-card-title,
    .table.mobile-cards.m-customer-list > tbody > tr > td.m-card-title,
    .table.mobile-cards.m-product-list > tbody > tr > td.m-card-title,
    .table.mobile-cards.m-stock-report > tbody > tr > td.m-card-title {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 0 0 2px 0;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-customer-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-product-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-stock-report > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-no,
    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-id {
        color: var(--text-light);
        font-size: 12px;
        padding: 0 0 var(--m-space-2) 0;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-product-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-stock-report > tbody > tr > td.m-card-sub {
        grid-column: 1;
        justify-content: flex-start;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-no,
    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-id {
        grid-column: 2;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-card-sub::before,
    .table.mobile-cards.m-product-list > tbody > tr > td.m-card-sub::before,
    .table.mobile-cards.m-stock-report > tbody > tr > td.m-card-sub::before,
    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-no::before,
    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-purchase-id::before {
        display: none;
    }

    .table.mobile-cards > tbody > tr > td.m-money,
    .table.mobile-cards > tbody > tr > td.m-grand-total {
        font-weight: 700;
    }

    .table.mobile-cards.m-purchase-list > tbody > tr > td.m-actions,
    .table.mobile-cards.m-customer-list > tbody > tr > td.m-actions,
    .table.mobile-cards.m-product-list > tbody > tr > td.m-actions,
    .table.mobile-cards.m-stock-report > tbody > tr > td.m-actions {
        grid-column: 1 / -1;
    }
}

/* ============================ 6.16 GLOBAL SECOND-WAVE POLISH */
@media screen and (max-width: 767px) {
    .table.mobile-cards.m-auto-list > tbody > tr,
    .table.mobile-cards.m-ledger-lite > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px var(--m-space-3);
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-card-title,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-card-title {
        grid-column: 1 / -1;
        padding: 0 0 2px 0;
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-card-title a,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-card-title a {
        color: var(--text-color);
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-card-sub,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-card-sub {
        color: var(--text-light);
        font-size: 12px;
        padding: 0 0 var(--m-space-2) 0;
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-card-sub::before {
        color: var(--text-light);
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-money,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-money {
        border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
        font-weight: 700;
    }

    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-money {
        justify-content: space-between;
    }

    .table.mobile-cards.m-auto-list > tbody > tr > td.m-actions,
    .table.mobile-cards.m-ledger-lite > tbody > tr > td.m-actions {
        grid-column: 1 / -1;
    }

    .table.mobile-cards.m-auto-list > tbody > tr:not(.m-open) > td.m-actions,
    .table.mobile-cards.m-ledger-lite > tbody > tr:not(.m-open) > td.m-actions {
        display: none;
    }

    .table.mobile-cards.m-actions-visible > tbody > tr > td.m-actions {
        display: flex;
    }

    .content .panel-heading .text-right,
    .content .panel-heading .pull-right {
        float: none !important;
        display: block;
        width: 100%;
        margin-top: var(--m-space-2);
        text-align: left;
    }

    .content .form-inline .form-group,
    .content .form-inline .form-control,
    .content .form-inline .btn {
        display: block;
        width: 100%;
        margin: 0 0 var(--m-space-2) 0;
    }

    .content input[type="submit"].btn,
    .content input[type="button"].btn[id*="add"],
    .content button[type="submit"].btn {
        min-height: 48px;
    }

    body.m-has-sticky-summary .content {
        padding-bottom: 96px;
    }

    .m-sticky-summary {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: var(--m-space-2);
        align-items: center;
        padding: var(--m-space-2) var(--m-space-3);
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--glass-border);
        box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.08);
    }

    .m-sticky-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--m-space-2);
        min-width: 0;
    }

    .m-sticky-metrics span {
        min-width: 0;
    }

    .m-sticky-metrics b {
        display: block;
        color: var(--text-light);
        font-size: var(--m-font-label);
        font-weight: 600;
        text-transform: uppercase;
    }

    .m-sticky-metrics strong {
        display: block;
        overflow: hidden;
        color: var(--text-color);
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .m-sticky-summary .btn {
        min-height: 48px;
        margin: 0;
    }

    #daily_closing ul.treeview-menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--m-space-2);
        padding: 0;
        margin: 0;
    }
    #daily_closing ul.treeview-menu br {
        display: none;
    }
    #daily_closing ul.treeview-menu li {
        list-style: none;
        margin: 0;
    }
    #daily_closing ul.treeview-menu .btn {
        width: auto;
        min-height: 36px;
        margin: 0;
        padding: 7px 10px !important;
        justify-content: flex-start;
        font-size: 12px;
        border-radius: 10px;
    }
    #dataTableExample6payment td.m-empty-amount {
        display: none !important;
    }
    .m-ledger-meta {
        display: block;
        margin-top: 5px;
        color: var(--text-light);
        font-size: 11px;
        font-weight: 500;
    }
    .m-hide-mobile {
        display: none !important;
    }
}

/* ===== Round 1: "New Customer / Old Customer" toggle button must not overlap the input above */
@media screen and (max-width: 767px) {
    #payment_from_1 .checkbox_account,
    #payment_from_2 .checkbox_account {
        display: block;
        width: 100%;
        margin-top: var(--m-space-2, 8px);
        position: relative;
        clear: both;
    }
}