/* ============================================================
   VJ Dashboard Mobile Compatibility Fixes
   Date: 2026-07-05
   Purpose: Make Azure-hosted VJ Dashboard usable on phones/tablets
   without changing existing desktop dashboard behaviour.
   ============================================================ */

:root {
    --mobile-bottom-nav-height: 74px;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Floating menu button created by mobile-responsive.js */
.vj-mobile-menu-btn {
    position: fixed;
    left: 14px;
    bottom: calc(var(--mobile-bottom-nav-height) + 16px);
    z-index: 1070;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 1px solid rgba(143, 106, 18, .28);
    background: linear-gradient(135deg, #8f6a12, #d4af37 58%, #f6e7ab);
    color: #1f1605;
    box-shadow: 0 18px 36px rgba(31, 22, 5, .24);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.vj-mobile-menu-btn:active {
    transform: translateY(1px) scale(.98);
}

.vj-mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    height: var(--mobile-bottom-nav-height);
    display: none;
    align-items: center;
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(212, 175, 55, .22);
    box-shadow: 0 -14px 36px rgba(15, 23, 42, .12);
    backdrop-filter: blur(14px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vj-mobile-bottom-nav a,
.vj-mobile-bottom-nav button {
    flex: 1 0 64px;
    min-width: 64px;
    height: 58px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #5f4a18;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
}

.vj-mobile-bottom-nav a i,
.vj-mobile-bottom-nav button i {
    font-size: 1.16rem;
    line-height: 1;
}

.vj-mobile-bottom-nav a.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, .18), rgba(143, 106, 18, .08));
    color: #24190b;
}

.vj-mobile-scroll-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 .55rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #fff8df;
    border: 1px solid rgba(212, 175, 55, .26);
    color: #73520b;
    font-size: .76rem;
    font-weight: 700;
}

/* General compact tablet/mobile shell */
@media (max-width: 991.98px) {
    body:has(.dashboard-shell) {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .vj-mobile-menu-btn,
    .vj-mobile-bottom-nav,
    .vj-mobile-scroll-hint {
        display: flex;
    }

    .dashboard-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100vh;
    }

    .dashboard-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        transform: translateX(-104%) !important;
        z-index: 1080 !important;
        padding: 1rem !important;
        box-shadow: 18px 0 48px rgba(15, 23, 42, .22) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-drawer-open .dashboard-sidebar {
        transform: translateX(0) !important;
    }

    body.mobile-drawer-open .multi-select-panel,
    body.mobile-drawer-open .vg-filter-excel-menu,
    body.mobile-drawer-open .vg-excel-filter-menu {
        display: none !important;
    }

    .sidebar-overlay,
    .vj-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, .46) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 1075 !important;
        transition: opacity .2s ease !important;
    }

    body.mobile-drawer-open .sidebar-overlay,
    body.mobile-drawer-open .vj-sidebar-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .dashboard-sidebar-inner {
        min-height: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 1rem !important;
    }

    .shell-main,
    body.sidebar-collapsed .shell-main {
        margin-left: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .dashboard-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1010 !important;
    }

    .header-wrap {
        padding: .65rem .7rem !important;
    }

    .header-card,
    .gm-header-card,
    .home-main-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
        padding: .85rem !important;
        border-radius: 16px !important;
    }

    .header-left,
    .header-right,
    .header-actions,
    .header-badges,
    .home-top-actions,
    .header-toolbar {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: .5rem !important;
        flex-wrap: wrap !important;
    }

    .header-title,
    .home-summary-title {
        font-size: clamp(1.16rem, 4.4vw, 1.55rem) !important;
        line-height: 1.18 !important;
        word-break: break-word;
    }

    .header-subtitle,
    .section-caption,
    .home-hero-label,
    .home-nav-copy {
        font-size: .84rem !important;
        line-height: 1.35 !important;
    }

    .content-body {
        padding: .75rem .7rem 1rem !important;
    }

    .panel-card,
    .table-card,
    .kpi-card,
    .summary-card,
    .metric-card,
    .insight-card,
    .filter-panel-card {
        border-radius: 16px !important;
        padding: .85rem !important;
    }

    .row.g-4,
    .row.g-3 {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .7rem;
    }

    .kpi-head,
    .metric-card,
    .insight-head {
        gap: .65rem !important;
    }

    .metric-icon,
    .kpi-icon,
    .insight-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
        font-size: 1rem !important;
        flex-basis: 42px !important;
    }

    .kpi-label,
    .metric-label,
    .summary-label,
    .insight-label {
        font-size: .78rem !important;
    }

    .kpi-value,
    .metric-value,
    .summary-value,
    .insight-value,
    .home-hero-value {
        font-size: clamp(1.16rem, 6vw, 1.55rem) !important;
    }

    .kpi-foot,
    .metric-foot,
    .summary-detail-line,
    .trend-split {
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    .amount-toggle-wrap,
    .amount-toggle,
    .compact-switcher,
    .dashboard-tools-actions {
        width: 100% !important;
    }

    .amount-toggle-btn,
    .theme-btn,
    .btn,
    .icon-btn {
        min-height: 42px;
    }

    .amount-toggle-btn {
        flex: 1 1 0 !important;
        padding: .52rem .6rem !important;
        font-size: .82rem !important;
    }

    .icon-btn {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }

    .desktop-only {
        display: none !important;
    }

    .global-footer,
    body.sidebar-collapsed .global-footer {
        margin-left: 0 !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    .footer-links {
        overflow-x: auto !important;
        max-width: 100% !important;
        padding-bottom: .3rem !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Phone layout */
@media (max-width: 767.98px) {
    body.mobile-drawer-open {
        overflow: hidden !important;
    }

    .dashboard-sidebar {
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        padding: 1rem .95rem calc(var(--mobile-bottom-nav-height) + 1rem) !important;
    }

    .dashboard-sidebar-inner {
        min-height: 100% !important;
    }

    .container,
    .container-fluid {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .home-top-row,
    .home-top-actions,
    .panel-head,
    .table-toolbar,
    .report-toolbar,
    .gm-report-toolbar,
    .report-toolbar-controls,
    .gm-report-toolbar-right {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .65rem !important;
    }

    .report-toolbar-controls,
    .gm-report-toolbar-right {
        overflow-x: visible !important;
    }

    .report-buttons-host,
    .report-buttons-host .dt-buttons,
    .dt-buttons,
    #gmReportButtonsHost,
    .toolbar-category-paging,
    .custom-category-paging,
    .report-search-manual,
    .chart-type-switch,
    .mini-toolbar-note {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .45rem !important;
    }

    .report-buttons-host .dt-buttons .btn,
    .report-buttons-host .dt-buttons button,
    .dt-buttons .btn,
    .dt-buttons button,
    .toolbar-category-paging .custom-page-btn,
    .custom-category-paging .custom-page-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .advanced-filter-grid,
    .filter-grid,
    .gm-filter-grid,
    .salesorder-filter-grid,
    .inventory-filter-grid,
    .dashboard-inventory-filter-grid,
    .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid,
    body.home-page .home-summary-gm .advanced-filter-grid.home-gm-filter-grid,
    body:not(.home-page) .advanced-filter-grid.gm-filter-grid.gm-filter-grid-simple {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .7rem !important;
    }

    .advanced-filter-grid > *,
    .filter-grid > *,
    .gm-filter-grid > *,
    .salesorder-filter-grid > *,
    .inventory-filter-grid > *,
    .dashboard-inventory-filter-grid > *,
    .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid > *,
    body.home-page .home-summary-gm .advanced-filter-grid.home-gm-filter-grid > *,
    body:not(.home-page) .advanced-filter-grid.gm-filter-grid.gm-filter-grid-simple > * {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .form-select,
    .form-control,
    .multi-select-trigger,
    .multi-select-dropdown,
    .btn-panel,
    .btn-gold,
    .btn-outline-secondary {
        width: 100% !important;
        min-height: 42px !important;
        font-size: .88rem !important;
    }

    .multi-select-panel,
    .vg-filter-excel-menu,
    .vg-excel-filter-menu {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 10px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: 62vh !important;
        overflow: auto !important;
        border-radius: 16px !important;
        z-index: 2000 !important;
    }

    .multi-select-panel-actions {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }

    .chart-wrap,
    .chart-wrap-wide,
    .chart-wrap-category,
    .chart-hold,
    .chart-hold-lg {
        min-height: 260px !important;
        height: 280px !important;
    }

    canvas {
        max-width: 100% !important;
    }

    .home-nav-card {
        grid-template-columns: 48px 1fr !important;
        gap: .75rem !important;
        padding: .85rem !important;
    }

    .home-nav-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        font-size: 1.1rem !important;
    }

    .hero-banner {
        padding: .95rem !important;
    }

    .hero-stats,
    .summary-grid,
    .summary-mini-grid,
    .highlight-pill-grid,
    .home-flow-grid,
    .home-nav-grid {
        grid-template-columns: 1fr !important;
    }

    .table-card,
    .panel-card:has(.table-responsive),
    .gm-report-wrap {
        overflow: hidden !important;
    }

    .table-responsive,
    .report-table-shell,
    .gm-report-table-wrap,
    .shipping-status-table-shell,
    .dt-scroll-body,
    div.dt-scroll-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
    }

    .custom-table,
    .gm-report-table,
    #reportTable,
    #gmReportTable,
    #soC_reportTable,
    .dataTable {
        min-width: 900px !important;
        font-size: .72rem !important;
    }

    .custom-table th,
    .custom-table td,
    .gm-report-table th,
    .gm-report-table td,
    #reportTable th,
    #reportTable td,
    #gmReportTable th,
    #gmReportTable td,
    #soC_reportTable th,
    #soC_reportTable td {
        padding: .38rem .42rem !important;
        white-space: nowrap !important;
    }

    .vg-filterable-th {
        min-width: 120px !important;
        padding-right: 30px !important;
    }

    .modal-dialog,
    .customer-detail-modal,
    .gm-detail-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content,
    .customer-detail-shell,
    .gm-detail-shell {
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 24px) !important;
        overflow: auto !important;
        border-radius: 18px !important;
    }

    .ai-chat-widget,
    .ai-chat-panel {
        max-width: calc(100vw - 18px) !important;
    }
}

/* Extra compact phones */
@media (max-width: 420px) {
    .vj-mobile-bottom-nav a,
    .vj-mobile-bottom-nav button {
        min-width: 58px;
        font-size: .62rem;
    }

    .vj-mobile-bottom-nav a i,
    .vj-mobile-bottom-nav button i {
        font-size: 1.06rem;
    }

    .vj-mobile-menu-btn {
        left: 10px;
        width: 46px;
        height: 46px;
    }

    .header-title {
        font-size: 1.08rem !important;
    }

    .panel-card,
    .table-card,
    .kpi-card,
    .summary-card,
    .filter-panel-card {
        padding: .72rem !important;
    }
}


/* ============================================================
   VJ Dashboard Mobile UX Polish - Phase 2
   Fixes reported phone issues:
   - Remove floating hamburger overlay from forms/tables
   - Compact mobile header so it does not waste vertical space
   - Force mobile filters into clean single-column cards
   - Improve report table scrolling/sticky first column
   - Move AI button above bottom nav
   ============================================================ */

@media (max-width: 991.98px) {
    :root {
        --mobile-bottom-nav-height: 72px;
    }

    body:has(.dashboard-shell) {
        background: #f4f7fb !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 20px + env(safe-area-inset-bottom)) !important;
    }

    /* The floating hamburger was covering filters/tables on phones. Use bottom "More" button instead. */
    .vj-mobile-menu-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .vj-mobile-bottom-nav {
        height: var(--mobile-bottom-nav-height) !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
        gap: 3px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .vj-mobile-bottom-nav a,
    .vj-mobile-bottom-nav button {
        height: 56px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 4px 2px !important;
        border-radius: 14px !important;
        font-size: .60rem !important;
        letter-spacing: -.01em !important;
    }

    .vj-mobile-bottom-nav a i,
    .vj-mobile-bottom-nav button i {
        font-size: 1rem !important;
    }

    .vj-mobile-bottom-nav span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Clean page spacing */
    .shell-main,
    .content-body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .content-body {
        padding: .55rem .55rem calc(var(--mobile-bottom-nav-height) + 24px) !important;
    }

    .container,
    .container-fluid {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
    }

    /* Compact, standard mobile top card */
    .dashboard-header {
        position: static !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .header-wrap {
        padding: .55rem .55rem .35rem !important;
    }

    .header-card,
    .gm-header-card,
    .home-main-header {
        position: relative !important;
        display: block !important;
        min-height: 0 !important;
        padding: .72rem .72rem .78rem !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(226,232,240,.95) !important;
        box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
        overflow: hidden !important;
    }

    .header-left,
    .header-right,
    .header-title-stack,
    .gm-header-left,
    .gm-header-right,
    .home-header-copy,
    .home-main-header > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
    }

    .header-title,
    .gm-header-title,
    .home-main-title,
    .home-summary-title {
        font-size: 1.03rem !important;
        line-height: 1.12 !important;
        margin: 0 !important;
        padding-right: 42px !important;
        letter-spacing: -.02em !important;
        word-break: normal !important;
    }

    .header-last-updated-inline,
    .header-last-updated-under-title,
    .gm-last-updated,
    .home-last-updated {
        display: flex !important;
        align-items: center !important;
        gap: .24rem !important;
        margin-top: .22rem !important;
        font-size: .58rem !important;
        line-height: 1.2 !important;
        color: #64748b !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    .header-last-updated-inline strong,
    .gm-last-updated strong,
    .home-last-updated strong {
        font-size: .58rem !important;
        color: #111827 !important;
    }

    .header-toolbar,
    .gm-header-toolbar,
    .home-top-actions,
    .header-actions,
    .header-badges {
        position: absolute !important;
        top: .55rem !important;
        right: .55rem !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: .3rem !important;
        flex-wrap: nowrap !important;
        z-index: 3 !important;
    }

    .icon-btn,
    .header-toolbar .icon-btn,
    .gm-header-toolbar .icon-btn,
    .home-top-actions .icon-btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
        font-size: .84rem !important;
    }

    .header-amount-stack,
    .gm-amount-stack,
    .home-amount-stack,
    .amount-toggle-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: .62rem 0 0 !important;
        padding: 0 !important;
    }

    .amount-toggle,
    body.mobile-viewport .amount-toggle,
    body.home-page .home-main-header .amount-toggle,
    body.mobile-viewport.home-page .home-main-header .amount-toggle {
        width: 100% !important;
        max-width: 250px !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-shadow: inset 0 0 0 1px rgba(212,175,55,.28) !important;
        background: #fff8df !important;
    }

    .amount-toggle-btn,
    body.mobile-viewport .amount-toggle-btn,
    body.home-page .home-main-header .amount-toggle-btn,
    body.mobile-viewport.home-page .home-main-header .amount-toggle-btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 .35rem !important;
        font-size: .70rem !important;
        line-height: 1 !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Filters should not show 3/5 tiny columns on phones/tablets. */
    .advanced-filter-grid,
    .filter-grid,
    .gm-filter-grid,
    .salesorder-filter-grid,
    .inventory-filter-grid,
    .dashboard-inventory-filter-grid,
    .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid,
    body.home-page .home-summary-gm .advanced-filter-grid.home-gm-filter-grid,
    body:not(.home-page) .advanced-filter-grid.gm-filter-grid.gm-filter-grid-simple {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .62rem !important;
        width: 100% !important;
    }

    .advanced-filter-grid > *,
    .filter-grid > *,
    .gm-filter-grid > *,
    .salesorder-filter-grid > *,
    .inventory-filter-grid > *,
    .dashboard-inventory-filter-grid > *,
    .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid > *,
    body.home-page .home-summary-gm .advanced-filter-grid.home-gm-filter-grid > *,
    body:not(.home-page) .advanced-filter-grid.gm-filter-grid.gm-filter-grid-simple > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        order: initial !important;
    }

    .filter-panel-card,
    .panel-card,
    .table-card,
    .kpi-card,
    .summary-card,
    .metric-card,
    .insight-card {
        padding: .78rem !important;
        border-radius: 18px !important;
        margin-bottom: .72rem !important;
        box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
    }

    .panel-head,
    .table-toolbar,
    .report-toolbar,
    .gm-report-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .55rem !important;
    }

    .section-title,
    .panel-title,
    .table-title {
        font-size: .95rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }

    .filter-box label,
    .form-label {
        font-size: .68rem !important;
        line-height: 1.15 !important;
        margin-bottom: .24rem !important;
        color: #7c5d05 !important;
        font-weight: 800 !important;
    }

    .form-select,
    .form-control,
    .multi-select-trigger,
    .multi-select-dropdown,
    .btn-panel,
    .btn-gold,
    .btn-outline-secondary {
        width: 100% !important;
        min-height: 40px !important;
        height: auto !important;
        font-size: .78rem !important;
        border-radius: 12px !important;
    }

    .btn-panel,
    .btn-gold,
    .btn-outline-secondary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .35rem !important;
        white-space: normal !important;
    }

    /* KPI cards: readable, not squeezed */
    #kpis.row,
    .row.g-4,
    .row.g-3 {
        --bs-gutter-x: .55rem !important;
        --bs-gutter-y: .55rem !important;
    }

    .kpi-value,
    .metric-value,
    .summary-value,
    .insight-value {
        font-size: 1.25rem !important;
        letter-spacing: -.03em !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .trend-split,
    .summary-detail-line,
    .kpi-foot,
    .metric-foot {
        font-size: .68rem !important;
        line-height: 1.28 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Tables: allow proper horizontal swipe without breaking layout */
    .table-responsive,
    .report-table-shell,
    .gm-report-table-wrap,
    .shipping-status-table-shell,
    .dt-scroll-body,
    div.dt-scroll-body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    .custom-table,
    .gm-report-table,
    #reportTable,
    #gmReportTable,
    #soC_reportTable,
    .dataTable {
        min-width: 760px !important;
        width: max-content !important;
        max-width: none !important;
        font-size: .70rem !important;
        table-layout: auto !important;
    }

    .custom-table th,
    .custom-table td,
    .gm-report-table th,
    .gm-report-table td,
    #reportTable th,
    #reportTable td,
    #gmReportTable th,
    #gmReportTable td,
    #soC_reportTable th,
    #soC_reportTable td {
        padding: .38rem .42rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    .custom-table th:first-child,
    .custom-table td:first-child,
    .gm-report-table th:first-child,
    .gm-report-table td:first-child,
    #reportTable th:first-child,
    #reportTable td:first-child,
    #gmReportTable th:first-child,
    #gmReportTable td:first-child,
    #soC_reportTable th:first-child,
    #soC_reportTable td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 2 !important;
        background: #fff !important;
        box-shadow: 1px 0 0 rgba(226,232,240,.9) !important;
    }

    .custom-table thead th:first-child,
    .gm-report-table thead th:first-child,
    #reportTable thead th:first-child,
    #gmReportTable thead th:first-child,
    #soC_reportTable thead th:first-child {
        z-index: 4 !important;
        background: #fff8df !important;
    }

    .vj-mobile-scroll-hint {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin: .25rem 0 .45rem !important;
        padding: .38rem .6rem !important;
        font-size: .68rem !important;
    }

    /* AI button should not cover bottom navigation or input fields */
    .vg-ai-chat {
        right: 12px !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom)) !important;
    }

    .vg-ai-chat-toggle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 17px !important;
        font-size: .68rem !important;
        box-shadow: 0 12px 28px rgba(17,24,39,.20) !important;
    }

    .vg-ai-chat-toggle i {
        font-size: 1.05rem !important;
    }

    .vg-ai-chat-panel {
        right: 0 !important;
        bottom: 60px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: min(620px, calc(100vh - var(--mobile-bottom-nav-height) - 96px)) !important;
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 96px) !important;
    }
}

@media (max-width: 430px) {
    .content-body,
    .header-wrap,
    .container,
    .container-fluid {
        padding-left: .48rem !important;
        padding-right: .48rem !important;
    }

    .header-card,
    .gm-header-card,
    .home-main-header,
    .filter-panel-card,
    .panel-card,
    .table-card,
    .kpi-card,
    .summary-card,
    .metric-card,
    .insight-card {
        border-radius: 16px !important;
    }

    .vj-mobile-bottom-nav a,
    .vj-mobile-bottom-nav button {
        font-size: .56rem !important;
    }

    .vj-mobile-bottom-nav a i,
    .vj-mobile-bottom-nav button i {
        font-size: .94rem !important;
    }

    .header-title,
    .gm-header-title,
    .home-main-title,
    .home-summary-title {
        font-size: .98rem !important;
    }

    .amount-toggle {
        max-width: 220px !important;
    }
}


/* ============================================================
   VJ Dashboard Mobile UX Polish - Phase 3
   Final pass for phone layout issues reported after V2:
   - header and top switch compact alignment
   - filter area forced into single clean column
   - better table horizontal scroll in all pages / detail tabs
   - stronger DataTable wrappers on small screens
   ============================================================ */

@media (max-width: 767.98px) {
    .section-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .6rem !important;
    }

    .section-toolbar > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.mobile-viewport .header-card,
    body.mobile-viewport .gm-header-card,
    body.mobile-viewport .home-main-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .55rem !important;
        padding: .72rem .72rem .82rem !important;
    }

    body.mobile-viewport .header-left,
    body.mobile-viewport .header-right,
    body.mobile-viewport .gm-header-left,
    body.mobile-viewport .gm-header-right,
    body.mobile-viewport .home-header-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.mobile-viewport .header-title,
    body.mobile-viewport .gm-header-title,
    body.mobile-viewport .home-main-title,
    body.mobile-viewport .home-summary-title {
        padding-right: 40px !important;
        margin-bottom: 0 !important;
    }

    body.mobile-viewport .header-last-updated-inline,
    body.mobile-viewport .header-last-updated-under-title,
    body.mobile-viewport .gm-last-updated,
    body.mobile-viewport .home-last-updated {
        font-size: .60rem !important;
        line-height: 1.25 !important;
        margin-top: .18rem !important;
    }

    body.mobile-viewport .header-toolbar,
    body.mobile-viewport .gm-header-toolbar,
    body.mobile-viewport .home-top-actions,
    body.mobile-viewport .header-actions,
    body.mobile-viewport .header-badges {
        position: absolute !important;
        top: .5rem !important;
        right: .5rem !important;
        margin: 0 !important;
    }

    body.mobile-viewport .header-amount-stack,
    body.mobile-viewport .gm-amount-stack,
    body.mobile-viewport .home-amount-stack,
    body.mobile-viewport .amount-toggle-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: .2rem !important;
    }

    body.mobile-viewport .amount-toggle {
        max-width: 210px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    body.mobile-viewport #filters .panel-head,
    body.mobile-viewport .filter-panel-card .panel-head,
    body.mobile-viewport .home-summary-inventory .panel-head,
    body.mobile-viewport .home-summary-gm .panel-head {
        margin-bottom: .45rem !important;
    }

    body.mobile-viewport .advanced-filter-grid,
    body.mobile-viewport .filter-grid,
    body.mobile-viewport .gm-filter-grid,
    body.mobile-viewport .salesorder-filter-grid,
    body.mobile-viewport .inventory-filter-grid,
    body.mobile-viewport .dashboard-inventory-filter-grid,
    body.mobile-viewport .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid,
    body.mobile-viewport .home-summary-gm .advanced-filter-grid.home-gm-filter-grid,
    body.mobile-viewport body:not(.home-page) .advanced-filter-grid.gm-filter-grid.gm-filter-grid-simple {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .68rem !important;
        width: 100% !important;
    }

    body.mobile-viewport .advanced-filter-grid > *,
    body.mobile-viewport .filter-grid > *,
    body.mobile-viewport .gm-filter-grid > *,
    body.mobile-viewport .salesorder-filter-grid > *,
    body.mobile-viewport .inventory-filter-grid > *,
    body.mobile-viewport .dashboard-inventory-filter-grid > *,
    body.mobile-viewport .home-summary-inventory .advanced-filter-grid.home-inventory-filter-grid > *,
    body.mobile-viewport .home-summary-gm .advanced-filter-grid.home-gm-filter-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        order: initial !important;
    }

    body.mobile-viewport .filter-box,
    body.mobile-viewport .filter-box.filter-box-multiselect,
    body.mobile-viewport .dashboard-reset-filter-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.mobile-viewport .filter-box label,
    body.mobile-viewport .form-label {
        display: block !important;
        width: 100% !important;
    }

    body.mobile-viewport .multi-select-dropdown,
    body.mobile-viewport .multi-select-trigger,
    body.mobile-viewport .multi-select-trigger > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.mobile-viewport .multi-select-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body.mobile-viewport .dashboard-reset-filter-box .btn,
    body.mobile-viewport .gm-filter-reset .btn,
    body.mobile-viewport .salesorder-filter-reset .btn {
        min-height: 44px !important;
    }

    body.mobile-viewport .dt-container,
    body.mobile-viewport .dataTables_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.mobile-viewport .dt-layout-row,
    body.mobile-viewport .dataTables_length,
    body.mobile-viewport .dataTables_filter,
    body.mobile-viewport .dataTables_info,
    body.mobile-viewport .dataTables_paginate {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.mobile-viewport .dt-layout-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
        margin: 0 !important;
    }

    body.mobile-viewport .dt-layout-cell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.mobile-viewport .dt-scroll,
    body.mobile-viewport .dataTables_scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        border-radius: 14px !important;
    }

    body.mobile-viewport .dt-scroll-head,
    body.mobile-viewport .dt-scroll-body,
    body.mobile-viewport .dataTables_scrollHead,
    body.mobile-viewport .dataTables_scrollBody,
    body.mobile-viewport div.dt-scroll-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(143,106,18,.65) rgba(212,175,55,.12) !important;
    }

    body.mobile-viewport .dt-scroll-head::-webkit-scrollbar,
    body.mobile-viewport .dt-scroll-body::-webkit-scrollbar,
    body.mobile-viewport .dataTables_scrollHead::-webkit-scrollbar,
    body.mobile-viewport .dataTables_scrollBody::-webkit-scrollbar,
    body.mobile-viewport .table-responsive::-webkit-scrollbar,
    body.mobile-viewport .report-table-shell::-webkit-scrollbar {
        height: 10px !important;
    }

    body.mobile-viewport .dt-scroll-head::-webkit-scrollbar-thumb,
    body.mobile-viewport .dt-scroll-body::-webkit-scrollbar-thumb,
    body.mobile-viewport .dataTables_scrollHead::-webkit-scrollbar-thumb,
    body.mobile-viewport .dataTables_scrollBody::-webkit-scrollbar-thumb,
    body.mobile-viewport .table-responsive::-webkit-scrollbar-thumb,
    body.mobile-viewport .report-table-shell::-webkit-scrollbar-thumb {
        background: rgba(143,106,18,.55) !important;
        border-radius: 999px !important;
    }

    body.mobile-viewport .dt-scroll-headInner,
    body.mobile-viewport .dataTables_scrollHeadInner {
        width: max-content !important;
        min-width: 100% !important;
    }

    body.mobile-viewport .dataTable,
    body.mobile-viewport .dt-scroll-head table,
    body.mobile-viewport .dt-scroll-body table,
    body.mobile-viewport .dataTables_scrollHead table,
    body.mobile-viewport .dataTables_scrollBody table,
    body.mobile-viewport #reportTable,
    body.mobile-viewport #gmReportTable,
    body.mobile-viewport #soC_reportTable,
    body.mobile-viewport #customerDetailTable,
    body.mobile-viewport #gmDetailTable {
        width: max-content !important;
        min-width: 860px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    body.mobile-viewport .table-responsive,
    body.mobile-viewport .report-table-shell,
    body.mobile-viewport .gm-report-table-wrap,
    body.mobile-viewport .shipping-status-table-shell {
        position: relative !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
}

/* Phase 4: keep the Home mobile header controls from overlapping. */
@media (max-width: 767.98px) {
    body.home-page .home-main-header.home-top-row,
    body.mobile-viewport.home-page .home-main-header.home-top-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .52rem !important;
        overflow: visible !important;
    }

    body.home-page .home-main-header .header-title-stack,
    body.mobile-viewport.home-page .home-main-header .header-title-stack {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 42px !important;
    }

    body.home-page .home-main-header .header-title,
    body.mobile-viewport.home-page .home-main-header .header-title {
        padding-right: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    body.home-page .home-main-header .header-last-updated-inline,
    body.mobile-viewport.home-page .home-main-header .header-last-updated-inline {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        row-gap: .08rem !important;
        overflow-wrap: anywhere !important;
    }

    body.home-page .home-main-header .home-top-actions,
    body.mobile-viewport.home-page .home-main-header .home-top-actions {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: .42rem !important;
        margin: 0 !important;
    }

    body.home-page .home-main-header .home-top-actions .header-toolbar,
    body.mobile-viewport.home-page .home-main-header .home-top-actions .header-toolbar {
        position: absolute !important;
        top: .5rem !important;
        right: .5rem !important;
        width: auto !important;
        display: inline-flex !important;
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    body.home-page .home-main-header .header-amount-stack,
    body.mobile-viewport.home-page .home-main-header .header-amount-stack {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home-page .home-main-header .amount-toggle-wrap,
    body.mobile-viewport.home-page .home-main-header .amount-toggle-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.home-page .home-main-header .amount-toggle,
    body.mobile-viewport.home-page .home-main-header .amount-toggle {
        width: min(210px, 100%) !important;
        max-width: 210px !important;
        margin: 0 auto !important;
    }
}

/* Phase 5: shared mobile amount switch polish only. */
@media (max-width: 767.98px) {
    .header-amount-stack,
    .gm-amount-stack,
    .home-main-header .header-amount-stack {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: .18rem 0 0 !important;
        padding: 0 !important;
    }

    .amount-toggle-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .amount-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: min(238px, calc(100vw - 72px)) !important;
        max-width: 238px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 auto !important;
        border-radius: 999px !important;
        background: #fff8df !important;
        border: 1px solid rgba(212, 175, 55, .45) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
        overflow: hidden !important;
    }

    .amount-toggle-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 .55rem !important;
        border-radius: 999px !important;
        font-size: .74rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }
}

/* Phase 6: shared mobile data-grid readability across all dashboard pages. */
@media (max-width: 767.98px) {
    .table-card,
    .panel-card:has(.table-responsive),
    .panel-card:has(.report-table-shell),
    .panel-card:has(.gm-report-table-wrap) {
        overflow: visible !important;
    }

    .dt-container,
    .dataTables_wrapper,
    .table-responsive,
    .report-table-shell,
    .gm-report-table-wrap,
    .shipping-status-table-shell,
    .vj-mobile-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .table-responsive,
    .report-table-shell,
    .gm-report-table-wrap,
    .shipping-status-table-shell,
    .dt-scroll,
    .dataTables_scroll,
    .dt-scroll-head,
    .dt-scroll-body,
    .dataTables_scrollHead,
    .dataTables_scrollBody,
    div.dt-scroll-body,
    .vj-mobile-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(143, 106, 18, .72) rgba(212, 175, 55, .14) !important;
    }

    .dt-scroll-body,
    .dataTables_scrollBody,
    div.dt-scroll-body {
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 220px) !important;
        min-height: 260px !important;
        overflow-y: auto !important;
        border-radius: 0 0 13px 13px !important;
    }

    .dt-scroll-head,
    .dataTables_scrollHead {
        border-radius: 13px 13px 0 0 !important;
        background: #fff8df !important;
    }

    .dt-scroll::-webkit-scrollbar,
    .dataTables_scroll::-webkit-scrollbar,
    .dt-scroll-head::-webkit-scrollbar,
    .dt-scroll-body::-webkit-scrollbar,
    .dataTables_scrollHead::-webkit-scrollbar,
    .dataTables_scrollBody::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .report-table-shell::-webkit-scrollbar,
    .gm-report-table-wrap::-webkit-scrollbar,
    .vj-mobile-table-wrap::-webkit-scrollbar {
        height: 12px !important;
        width: 12px !important;
    }

    .dt-scroll::-webkit-scrollbar-thumb,
    .dataTables_scroll::-webkit-scrollbar-thumb,
    .dt-scroll-head::-webkit-scrollbar-thumb,
    .dt-scroll-body::-webkit-scrollbar-thumb,
    .dataTables_scrollHead::-webkit-scrollbar-thumb,
    .dataTables_scrollBody::-webkit-scrollbar-thumb,
    .table-responsive::-webkit-scrollbar-thumb,
    .report-table-shell::-webkit-scrollbar-thumb,
    .gm-report-table-wrap::-webkit-scrollbar-thumb,
    .vj-mobile-table-wrap::-webkit-scrollbar-thumb {
        background: rgba(143, 106, 18, .68) !important;
        border-radius: 999px !important;
        border: 3px solid rgba(255, 248, 223, .95) !important;
    }

    .dt-scroll-headInner,
    .dataTables_scrollHeadInner {
        width: max-content !important;
        min-width: 100% !important;
    }

    .table-responsive > table,
    .report-table-shell > table,
    .gm-report-table-wrap > table,
    .dt-scroll-head table,
    .dt-scroll-body table,
    .dataTables_scrollHead table,
    .dataTables_scrollBody table,
    .dataTable,
    .custom-table,
    .gm-report-table,
    .historical-table,
    #reportTable,
    #customerDetailTable,
    #gmReportTable,
    #gmDetailTable,
    #soC_reportTable {
        width: max-content !important;
        min-width: 980px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    #gmReportTable,
    .gm-report-table,
    .dt-scroll-head table.gm-report-table,
    .dt-scroll-body table.gm-report-table {
        min-width: 1680px !important;
    }

    #soC_reportTable,
    .dt-scroll-head table#soC_reportTable,
    .dt-scroll-body table#soC_reportTable {
        min-width: 1320px !important;
    }

    .custom-table th,
    .custom-table td,
    .gm-report-table th,
    .gm-report-table td,
    .dataTable th,
    .dataTable td,
    .historical-table th,
    .historical-table td,
    #reportTable th,
    #reportTable td,
    #customerDetailTable th,
    #customerDetailTable td,
    #gmReportTable th,
    #gmReportTable td,
    #gmDetailTable th,
    #gmDetailTable td,
    #soC_reportTable th,
    #soC_reportTable td {
        padding: .42rem .5rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        min-height: 34px !important;
    }

    .custom-table thead th,
    .gm-report-table thead th,
    .dataTable thead th,
    .historical-table thead th,
    .dt-scroll-head thead th,
    .dataTables_scrollHead thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        background: #fff8df !important;
        color: #332407 !important;
        font-weight: 800 !important;
        box-shadow: inset 0 -1px 0 rgba(143, 106, 18, .2) !important;
    }

    .custom-table tbody td:first-child,
    .custom-table thead th:first-child,
    .dataTable tbody td:first-child,
    .dataTable thead th:first-child,
    .historical-table tbody td:first-child,
    .historical-table thead th:first-child,
    #reportTable tbody td:first-child,
    #reportTable thead th:first-child,
    #customerDetailTable tbody td:first-child,
    #customerDetailTable thead th:first-child,
    #gmDetailTable tbody td:first-child,
    #gmDetailTable thead th:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 35 !important;
        max-width: 150px !important;
        min-width: 118px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    .custom-table thead th:first-child,
    .dataTable thead th:first-child,
    .historical-table thead th:first-child,
    #reportTable thead th:first-child,
    #customerDetailTable thead th:first-child,
    #gmDetailTable thead th:first-child {
        z-index: 45 !important;
        background: #f5e7bd !important;
    }

    /* Shipping summary sticky total rows must sit above the sticky Customer column. */
    #shippingStatusTable thead th {
        z-index: 70 !important;
    }

    #shippingStatusTable tbody tr:nth-child(1) td,
    #shippingStatusTable tbody tr:nth-child(2) td,
    #shippingStatusTable tbody tr:nth-child(3) td {
        z-index: 60 !important;
    }

    #shippingStatusTable tbody tr:nth-child(1) td:first-child,
    #shippingStatusTable tbody tr:nth-child(2) td:first-child,
    #shippingStatusTable tbody tr:nth-child(3) td:first-child {
        z-index: 65 !important;
    }

    .dt-layout-row,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dt-layout-row,
    .dataTables_wrapper .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
        margin: 0 !important;
    }

    .dt-layout-cell,
    .dt-search,
    .dt-length,
    .dataTables_filter,
    .dataTables_length {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .dt-search input,
    .dataTables_filter input {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 10px !important;
    }

    .report-buttons-host,
    .report-buttons-host .dt-buttons,
    .dt-buttons,
    #gmReportButtonsHost,
    #customerDetailButtonsHost,
    #gmDetailButtonsHost {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .45rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dt-buttons .btn,
    .dt-buttons button,
    .report-buttons-host .btn,
    .report-buttons-host button,
    #gmReportButtonsHost .btn,
    #gmReportButtonsHost button,
    #customerDetailButtonsHost .btn,
    #customerDetailButtonsHost button,
    #gmDetailButtonsHost .btn,
    #gmDetailButtonsHost button {
        width: 100% !important;
        min-height: 36px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        border-radius: 10px !important;
        font-size: .72rem !important;
    }

    .table-top-scrollbar {
        display: block !important;
        height: 15px !important;
        margin: .15rem 0 .45rem !important;
        border-radius: 999px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #fff8df !important;
        border-color: rgba(212, 175, 55, .35) !important;
    }

    .vj-mobile-scroll-hint {
        display: flex !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        margin: .22rem 0 .42rem !important;
        padding: .38rem .58rem !important;
        font-size: .68rem !important;
        border-radius: 999px !important;
    }
}

/* Phase 7: mobile table footer scrollbar, AI button, and compact toolbar controls. */
@media (max-width: 767.98px) {
    .vj-mobile-bottom-scrollbar {
        display: block !important;
        width: 100% !important;
        height: 18px !important;
        margin: .4rem 0 .8rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid rgba(212, 175, 55, .42) !important;
        border-radius: 999px !important;
        background: #fff8df !important;
        box-shadow: inset 0 1px 2px rgba(143, 106, 18, .08) !important;
    }

    .vj-mobile-bottom-scrollbar-inner {
        height: 1px !important;
        min-width: 100% !important;
    }

    .vj-mobile-bottom-scrollbar::-webkit-scrollbar {
        height: 14px !important;
    }

    .vj-mobile-bottom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(143, 106, 18, .72) !important;
        border: 3px solid #fff8df !important;
        border-radius: 999px !important;
    }

    .vg-ai-chat {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        right: 10px !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom)) !important;
        z-index: 2147483640 !important;
        pointer-events: auto !important;
    }

    .vg-ai-chat-toggle {
        display: inline-flex !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 16px !important;
    }

    .vg-ai-chat-panel {
        right: 0 !important;
        bottom: 58px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: min(620px, calc(100vh - var(--mobile-bottom-nav-height) - 90px)) !important;
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 90px) !important;
    }

    .section-toolbar,
    .report-section-header {
        align-items: stretch !important;
    }

    .section-toggle-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .45rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-toggle-actions .section-toggle-btn,
    .section-toggle-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: .44rem .5rem !important;
        border-radius: 10px !important;
        justify-content: center !important;
        gap: .25rem !important;
        font-size: .70rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .section-toggle-btn i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: .78rem !important;
    }

    .shipping-status-toolbar,
    .shipping-actions-bar,
    .shipping-export-toolbar,
    .shipping-filter-bar,
    .shipping-summary-filters,
    .shipping-date-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .55rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .shipping-export-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .shipping-export-toolbar .btn,
    .shipping-orders-excel-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: .42rem .45rem !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 10px !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .shipping-view-paging,
    .toolbar-category-paging.shipping-view-paging {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .45rem !important;
        width: 100% !important;
    }

    .shipping-view-paging .custom-page-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

    .shipping-search-box,
    .shipping-search-box--inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .22rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .shipping-search-box label,
    .shipping-search-box--inline label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: .66rem !important;
        line-height: 1.1 !important;
        color: #7c5d05 !important;
        font-weight: 800 !important;
    }

    #shippingStatusSearch,
    .shipping-search-box input,
    .shipping-filter-item .form-control,
    .shipping-filter-item .form-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        font-size: .72rem !important;
    }

    .shipping-filter-divider {
        display: none !important;
    }
}

/* Phase 8: keep footer and AI clear of the fixed mobile bottom nav. */
@media (max-width: 767.98px) {
    html,
    body {
        scroll-padding-bottom: calc(var(--mobile-bottom-nav-height) + 96px + env(safe-area-inset-bottom)) !important;
    }

    body:has(.dashboard-shell) {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 96px + env(safe-area-inset-bottom)) !important;
    }

    .content-body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 72px + env(safe-area-inset-bottom)) !important;
    }

    .global-footer,
    body.sidebar-collapsed .global-footer,
    body.home-page .global-footer {
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 88px + env(safe-area-inset-bottom)) !important;
        margin-bottom: 0 !important;
    }

    .footer-inner {
        margin-bottom: 0 !important;
    }

    .vj-mobile-bottom-nav {
        z-index: 2147483000 !important;
    }

    .vg-ai-chat {
        right: 18px !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 54px + env(safe-area-inset-bottom)) !important;
        z-index: 2147483640 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .vg-ai-chat-toggle {
        display: inline-flex !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        border-radius: 19px !important;
        border: 2px solid rgba(255, 255, 255, .86) !important;
        background: linear-gradient(135deg, #8f6a12, #d4af37 56%, #f6e7ab) !important;
        color: #111827 !important;
        box-shadow: 0 18px 38px rgba(31, 22, 5, .32) !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .vg-ai-chat-toggle i {
        font-size: 1.18rem !important;
    }

    .vg-ai-chat-toggle span {
        display: inline-block !important;
        font-size: .72rem !important;
        font-weight: 900 !important;
    }
}

/* Phase 9: AI assistant is desktop/tablet only; hide on phone screens. */
@media (max-width: 767.98px) {
    .vg-ai-chat {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Phase 10: remove the blank footer gap while keeping footer above mobile nav. */
@media (max-width: 767.98px) {
    html,
    body {
        scroll-padding-bottom: calc(var(--mobile-bottom-nav-height) + 8px + env(safe-area-inset-bottom)) !important;
    }

    body:has(.dashboard-shell) {
        padding-bottom: 0 !important;
    }

    .content-body {
        padding-bottom: .5rem !important;
    }

    .global-footer,
    body.sidebar-collapsed .global-footer,
    body.home-page .global-footer {
        display: block !important;
        position: relative !important;
        margin-left: 0 !important;
        margin-top: .25rem !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 8px + env(safe-area-inset-bottom)) !important;
    }

    .global-footer .container-fluid {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
    }

    .footer-inner {
        display: block !important;
        padding: .55rem .65rem !important;
        border-radius: 14px !important;
        margin: 0 !important;
    }
}

/* Phase 11: keep all project data grids scrollable on mobile landscape/tablet widths too. */
@media (max-width: 991.98px) {
    .table-responsive,
    .vj-mobile-table-wrap {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior: contain !important;
    }

    .report-table-shell.shipping-status-table-shell,
    .shipping-orders-detail-shell {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior: contain !important;
    }

    .report-table-shell,
    .gm-report-table-wrap,
    .shipping-status-table-shell,
    .dt-scroll,
    .dataTables_scroll {
        overflow: visible !important;
    }

    .dt-scroll-head,
    .dataTables_scrollHead {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .dt-scroll-body,
    .dataTables_scrollBody,
    div.dt-scroll-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior: contain !important;
        max-height: calc(100vh - 260px) !important;
        min-height: 0 !important;
    }

    .dt-scroll-headInner,
    .dataTables_scrollHeadInner {
        width: max-content !important;
        min-width: 100% !important;
    }

    .dt-scroll-head table,
    .dt-scroll-body table,
    .dataTables_scrollHead table,
    .dataTables_scrollBody table,
    #reportTable,
    #gmReportTable,
    #soC_reportTable,
    #customerDetailTable,
    #gmDetailTable {
        width: max-content !important;
        min-width: 1100px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    #shippingStatusTable,
    #shippingOrdersDetailTable {
        width: max-content !important;
        min-width: 980px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    /* Shipping summary: freeze Customer column and clip long names. */
    #shippingStatusTable thead th:first-child,
    #shippingStatusTable tbody td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 55 !important;
        min-width: 190px !important;
        max-width: 190px !important;
        width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    #shippingStatusTable thead th:first-child {
        z-index: 75 !important;
        background: #f5e7bd !important;
    }

    #shippingStatusTable thead th:first-child .shipping-th-filter {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #shippingStatusTable .shipping-customer-link {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #shippingStatusTable tbody tr:nth-child(1) td:first-child,
    #shippingStatusTable tbody tr:nth-child(2) td:first-child,
    #shippingStatusTable tbody tr:nth-child(3) td:first-child {
        z-index: 65 !important;
        background: #fffdf7 !important;
    }

    /* Customer detail popup: let the whole grid scroll normally on touch devices. */
    #customerDetailTable thead th:first-child,
    #customerDetailTable tbody td:first-child {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        min-width: 160px !important;
        max-width: none !important;
        width: auto !important;
        box-shadow: none !important;
    }

    #customerDetailModal .table-top-scrollbar {
        position: relative !important;
        z-index: 6 !important;
    }

    /* Customer Details page: keep Customer frozen while value columns scroll. */
    #inventoryReportSectionBody #reportTable th.sticky-col-1,
    #inventoryReportSectionBody #reportTable td.sticky-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 55 !important;
        min-width: 190px !important;
        max-width: 190px !important;
        width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    #inventoryReportSectionBody #reportTable thead th.sticky-col-1 {
        z-index: 75 !important;
        background: #f5e7bd !important;
    }

    #inventoryReportSectionBody #reportTable .customer-drill-link {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #inventoryReportSectionBody .table-top-scrollbar,
    #soC_report .table-top-scrollbar,
    #soC_topScroll {
        position: relative !important;
        z-index: 3 !important;
    }

    /* Customer Details: Sales Summary + Sales Order grids scroll inside their body only. */
    #gmReportSectionBody #gmReportTable th.sticky-col-1,
    #gmReportSectionBody #gmReportTable td.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable td.sticky-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 4 !important;
        min-width: 190px !important;
        max-width: 190px !important;
        width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    #gmReportSectionBody #gmReportTable thead th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable thead th.sticky-col-1 {
        z-index: 6 !important;
        background: #f5e7bd !important;
    }

    #gmReportSectionBody #gmReportTable .customer-drill-link,
    #soC_inventoryReportSectionBody #soC_reportTable .customer-drill-link {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #sales-summary .table-card,
    #sales-order-summary #soC_report {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    #gmReportSectionBody,
    #gmReportSectionBody .gm-report-table-wrap,
    #soC_inventoryReportSectionBody {
        overflow: hidden !important;
        max-height: none !important;
        background: #fff !important;
    }

    #gmReportSectionBody .dt-scroll-body,
    #gmReportSectionBody .dataTables_scrollBody,
    #soC_report .dt-scroll-body,
    #soC_report .dataTables_scrollBody,
    #soC_inventoryReportSectionBody.report-table-shell .dt-scroll-body,
    #gmReportSectionBody .gm-report-table-wrap .dt-scroll-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        background: #fff !important;
    }

    #gmReportSectionBody #gmReportTable th.sticky-col-1,
    #gmReportSectionBody #gmReportTable td.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable td.sticky-col-1 {
        z-index: 4 !important;
    }

    #gmReportSectionBody #gmReportTable thead th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable thead th.sticky-col-1 {
        z-index: 6 !important;
    }

    #inventoryReportSectionBody .table-top-scrollbar,
    #soC_report .table-top-scrollbar,
    #soC_topScroll {
        position: relative !important;
        z-index: 3 !important;
    }

    /* Mobile tables: keep only the first sticky column.
       Extra frozen columns make horizontal swipe unreliable on phones/tablets. */
    .custom-table .sticky-col-2,
    .custom-table .sticky-col-3,
    .custom-table .sticky-col-4,
    .gm-report-table .sticky-col-2,
    .gm-report-table .sticky-col-3,
    .gm-report-table .sticky-col-4 {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    .custom-table .sticky-col-1,
    .gm-report-table .sticky-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 35 !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    .custom-table thead .sticky-col-1,
    .gm-report-table thead .sticky-col-1,
    .dt-scroll-head .sticky-col-1 {
        z-index: 45 !important;
        background: #f5e7bd !important;
    }

    .report-toolbar.report-toolbar-controls-only,
    .gm-report-toolbar.gm-report-toolbar-controls-only {
        padding: .65rem !important;
    }

    .report-toolbar-controls-only .report-toolbar-controls,
    .gm-report-toolbar-controls-only .gm-report-toolbar-right {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .55rem !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .report-toolbar-controls-only .report-toolbar-controls > .btn,
    .gm-report-toolbar-controls-only .gm-report-toolbar-right > .btn,
    .report-toolbar-controls-only #inventoryTableFullscreenBtn,
    .report-toolbar-controls-only #soC_inventoryTableFullscreenBtn,
    .gm-report-toolbar-controls-only #gmTableFullscreenBtn {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

    .report-buttons-host,
    .report-buttons-host .dt-buttons,
    #reportButtonsHost,
    #soC_reportButtonsHost,
    #gmReportButtonsHost {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .report-buttons-host .btn,
    .report-buttons-host button,
    #reportButtonsHost .btn,
    #reportButtonsHost button,
    #soC_reportButtonsHost .btn,
    #soC_reportButtonsHost button,
    #gmReportButtonsHost .btn,
    #gmReportButtonsHost button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: .45rem .5rem !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .custom-category-paging,
    .toolbar-category-paging {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .45rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .custom-category-paging .custom-page-btn,
    .toolbar-category-paging .custom-page-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        padding: .42rem .35rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .85rem !important;
    }

    .section-toolbar > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .section-toggle-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: .5rem !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .section-toggle-actions .section-toggle-btn,
    .section-toggle-btn {
        width: auto !important;
        min-width: 148px !important;
        padding: .5rem .8rem !important;
        white-space: nowrap !important;
    }

    .report-toolbar.report-toolbar-controls-only,
    .gm-report-toolbar.gm-report-toolbar-controls-only {
        padding: .75rem !important;
    }

    .report-toolbar-controls-only .report-toolbar-controls,
    .gm-report-toolbar-controls-only .gm-report-toolbar-right {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: .6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    .report-toolbar-controls-only #inventoryTableFullscreenBtn,
    .report-toolbar-controls-only #soC_inventoryTableFullscreenBtn,
    .gm-report-toolbar-controls-only #gmTableFullscreenBtn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 42px !important;
    }

    .report-buttons-host,
    .report-buttons-host .dt-buttons,
    #reportButtonsHost,
    #soC_reportButtonsHost,
    #gmReportButtonsHost {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .5rem !important;
        grid-column: 1 / 4 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .custom-category-paging,
    .toolbar-category-paging {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .5rem !important;
        grid-column: 4 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .report-buttons-host .btn,
    .report-buttons-host button,
    #reportButtonsHost .btn,
    #reportButtonsHost button,
    #soC_reportButtonsHost .btn,
    #soC_reportButtonsHost button,
    #gmReportButtonsHost .btn,
    #gmReportButtonsHost button,
    .custom-category-paging .custom-page-btn,
    .toolbar-category-paging .custom-page-btn {
        min-height: 40px !important;
        padding: .5rem .45rem !important;
        font-size: .78rem !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .dt-scroll-body,
    .dataTables_scrollBody,
    div.dt-scroll-body,
    .table-responsive {
        max-height: calc(100vh - 180px) !important;
    }

    /* Landscape: keep Customer Details grids inside their own cards. */
    #sales-summary,
    #sales-order-summary {
        position: relative !important;
        display: flow-root !important;
        clear: both !important;
    }

    #sales-summary {
        padding-bottom: .75rem !important;
        margin-bottom: .5rem !important;
    }

    #sales-order-summary {
        padding-top: .75rem !important;
        margin-top: .75rem !important;
        border-top: 2px solid rgba(212, 175, 55, .14) !important;
    }

    #sales-summary .panel-card:has(#gmReportSectionBody),
    #sales-summary .table-card,
    #sales-order-summary #soC_report {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        background: #fff !important;
        margin-bottom: 1rem !important;
    }

    #sales-summary .table-responsive,
    #sales-summary .gm-report-table-wrap,
    #sales-order-summary .table-responsive,
    #sales-order-summary .report-table-shell,
    #gmReportSectionBody,
    #soC_inventoryReportSectionBody {
        max-height: none !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    #gmReportSectionBody .dt-scroll-body,
    #gmReportSectionBody .dataTables_scrollBody {
        max-height: 30vh !important;
        height: 30vh !important;
        min-height: 140px !important;
    }

    #soC_report .dt-scroll-body,
    #soC_report .dataTables_scrollBody {
        max-height: 28vh !important;
        height: 28vh !important;
        min-height: 130px !important;
    }

    #sales-summary .report-toolbar,
    #sales-summary .gm-report-toolbar,
    #sales-order-summary .report-toolbar {
        position: relative !important;
        top: auto !important;
        z-index: 2 !important;
    }

    .content-body {
        overflow-x: visible !important;
    }

    /* Landscape mobile/tablet: keep the first column frozen, but release extra sticky columns. */
    .custom-table .sticky-col-2,
    .custom-table .sticky-col-3,
    .custom-table .sticky-col-4,
    .gm-report-table .sticky-col-2,
    .gm-report-table .sticky-col-2,
    .gm-report-table .sticky-col-3,
    .gm-report-table .sticky-col-4 {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    #reportTable tbody td:first-child,
    #reportTable thead th:first-child,
    #customerDetailTable tbody td:first-child,
    #customerDetailTable thead th:first-child,
    #gmDetailTable tbody td:first-child,
    #gmDetailTable thead th:first-child,
    .custom-table .sticky-col-1,
    .gm-report-table .sticky-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 55 !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    .custom-table thead th:first-child,
    .dataTable thead th:first-child,
    .historical-table thead th:first-child,
    #reportTable thead th:first-child,
    #customerDetailTable thead th:first-child,
    #gmDetailTable thead th:first-child,
    .custom-table thead .sticky-col-1,
    .gm-report-table thead .sticky-col-1 {
        z-index: 65 !important;
        background: #f5e7bd !important;
    }

    #shippingStatusTable thead th {
        z-index: 70 !important;
    }

    #shippingStatusTable tbody tr:nth-child(1) td,
    #shippingStatusTable tbody tr:nth-child(2) td,
    #shippingStatusTable tbody tr:nth-child(3) td {
        position: sticky !important;
        z-index: 60 !important;
    }

    #customerDetailTable thead th:first-child,
    #customerDetailTable tbody td:first-child {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    #customerDetailModal .table-top-scrollbar {
        position: relative !important;
        z-index: 6 !important;
    }

    #inventoryReportSectionBody #reportTable th.sticky-col-1,
    #inventoryReportSectionBody #reportTable td.sticky-col-1,
    #gmReportSectionBody #gmReportTable th.sticky-col-1,
    #gmReportSectionBody #gmReportTable td.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable td.sticky-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 4 !important;
        min-width: 190px !important;
        max-width: 190px !important;
        width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background: #fffdf7 !important;
        box-shadow: 2px 0 0 rgba(212, 175, 55, .18) !important;
    }

    #inventoryReportSectionBody #reportTable thead th.sticky-col-1,
    #gmReportSectionBody #gmReportTable thead th.sticky-col-1,
    #soC_inventoryReportSectionBody #soC_reportTable thead th.sticky-col-1 {
        z-index: 6 !important;
        background: #f5e7bd !important;
    }

    #inventoryReportSectionBody #reportTable .customer-drill-link,
    #gmReportSectionBody #gmReportTable .customer-drill-link,
    #soC_inventoryReportSectionBody #soC_reportTable .customer-drill-link {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    #inventoryReportSectionBody .table-top-scrollbar,
    #soC_report .table-top-scrollbar,
    #soC_topScroll {
        position: relative !important;
        z-index: 3 !important;
    }

}