/* PET360 responsive hardening layer
   Loaded last so mobile/tablet rules are not cancelled by legacy theme overlays. */

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.app-shell,
.main-shell,
.content,
.content-gi,
.panel,
.data-panel,
.erp-widget,
.erp-section,
.gi-main,
.gi-inquiry,
.modal-card {
    min-width: 0;
}

.table-wrap,
.detail-table-wrap,
.cashier-close-table-wrap,
.cashier-close-receipts-wrap,
.settings-user-table-wrap,
.sales-line-table-wrap,
.workflow-table-wrap,
.gi-grid-scroll,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.detail-table-wrap table,
.cashier-close-table-wrap table,
.cashier-close-receipts-wrap table,
.settings-user-table-wrap table,
.sales-line-table-wrap table,
.workflow-table-wrap table,
.gi-grid-scroll table {
    width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.mobile-nav-backdrop {
    position: fixed;
    z-index: 34;
    inset: 56px 0 0;
    display: none;
    background: rgba(17, 24, 39, .42);
    backdrop-filter: blur(1px);
}

.mobile-nav-backdrop.is-open {
    display: block;
}

@media (max-width: 1180px) {
    body.erp-theme .company-context:first-of-type {
        display: none;
    }

    body.erp-theme .global-search {
        width: min(420px, 42vw);
    }

    .metric-grid,
    .department-summary,
    .production-kpis,
    .payments-hub-grid,
    .reports-kpi-grid,
    .reports-kpi-grid-compact,
    .reports-catalog-kpis,
    .customer-stats,
    .sales-stats,
    .product-detail-kpis,
    .credit-aging-summary,
    .exception-grid,
    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid,
    .inventory-dual-panel,
    .settings-two-column,
    .product-detail-body,
    .customer-detail-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    :root {
        --pet-mobile-topbar: 56px;
    }

    body:not(.login-page),
    body.erp-theme:not(.login-page) {
        padding-top: var(--pet-mobile-topbar) !important;
    }

    body.sidebar-open,
    body.mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    body.erp-theme .global-bar {
        height: var(--pet-mobile-topbar);
        align-items: center;
    }

    body.erp-theme .menu-toggle {
        width: 52px;
        height: var(--pet-mobile-topbar);
        flex: 0 0 52px;
        border-right: 1px solid var(--erp-border);
        border-radius: 0;
    }

    body.erp-theme .global-brand {
        min-width: 0;
        padding: 0 10px;
    }

    body.erp-theme .global-brand strong {
        font-size: 13px;
    }

    body.erp-theme .global-brand::after,
    body.erp-theme .company-context,
    body.erp-theme .global-icon,
    body.erp-theme .global-user > span:not(.avatar),
    body.erp-theme .global-user > b {
        display: none !important;
    }

    body.erp-theme .global-search {
        width: auto;
        min-width: 0;
        height: 38px;
        margin-right: 8px;
        flex: 1 1 auto;
    }

    body.erp-theme .global-search input {
        min-width: 0;
        width: 100%;
        font-size: 16px;
    }

    body.erp-theme .global-user {
        min-width: 42px;
        padding: 0 8px 0 0;
        justify-content: center;
    }

    body.erp-theme .global-user .avatar {
        width: 32px;
        height: 32px;
    }

    body.icon-rail-shell.erp-theme aside.icon-rail,
    body.icon-rail-shell.erp-theme aside.icon-rail:hover,
    body.icon-rail-shell.erp-theme aside.icon-rail.is-pinned,
    body.icon-rail-shell.erp-theme aside.icon-rail.is-open {
        top: var(--pet-mobile-topbar);
        width: min(86vw, 320px);
        max-width: 320px;
        transform: translateX(-102%);
        box-shadow: none;
        transition: transform .22s ease, box-shadow .22s ease;
    }

    body.icon-rail-shell.erp-theme aside.icon-rail.is-open {
        transform: translateX(0);
        box-shadow: 18px 0 45px rgba(17, 24, 39, .24);
    }

    body.icon-rail-shell.erp-theme .icon-rail .icon-rail-text,
    body.icon-rail-shell.erp-theme .icon-rail .icon-rail-head-label,
    body.icon-rail-shell.erp-theme .icon-rail .icon-rail-status-label {
        width: auto;
        opacity: 1;
    }

    body.icon-rail-shell.erp-theme .main-shell,
    body.icon-rail-shell.rail-pinned.erp-theme .main-shell {
        width: 100%;
        margin-left: 0;
    }

    body.erp-theme .topbar {
        position: sticky;
        z-index: 22;
        top: var(--pet-mobile-topbar);
        min-height: 58px;
        padding: 9px 12px;
        align-items: center;
        gap: 10px;
    }

    body.erp-theme .topbar > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.erp-theme .topbar h1,
    .topbar h1,
    .workspace-title h2,
    .module-heading h2 {
        overflow: hidden;
        margin: 2px 0 0;
        font-size: 19px !important;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb {
        overflow: hidden;
        font-size: 10px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .screen-commands {
        margin-left: auto;
        flex: 0 0 auto;
        gap: 4px;
    }

    .screen-commands button,
    .screen-commands a {
        min-height: 40px;
        padding: 0 10px;
    }

    body.erp-theme .content,
    body.erp-theme .content-gi,
    .content,
    .content-gi {
        width: 100%;
        padding: 12px 10px 40px !important;
    }

    .welcome-row,
    .workspace-title,
    .module-heading,
    .panel-header,
    .cashier-close-head,
    .cashier-close-launcher,
    .reports-command-deck,
    .reports-command-form,
    .reports-catalog-hero,
    .product-insight-bar,
    .customer-insight-bar,
    .sales-insight-bar,
    .inventory-insight-bar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .record-command-bar,
    .entry-command-bar,
    .table-toolbar,
    .inventory-toolbar-layout {
        height: auto !important;
        min-height: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .table-toolbar,
    .inventory-toolbar-layout {
        padding: 8px !important;
    }

    .toolbar-right,
    .inventory-toolbar-primary,
    .inventory-toolbar-secondary {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .search-box,
    .inventory-toolbar-primary .search-box {
        width: 100% !important;
        max-width: none;
        flex: 1 1 100%;
    }

    .search-box input,
    .inventory-toolbar-primary .search-box input {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .view-selector,
    .payment-views,
    .sales-views,
    .scope-tabs,
    .toolbar-tabs,
    .inventory-category-tabs,
    .entry-tabs,
    .product-detail-tabs,
    .customer-detail-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .view-selector > *,
    .payment-views > *,
    .sales-views > *,
    .scope-tabs > *,
    .toolbar-tabs > *,
    .inventory-category-tabs > *,
    .entry-tabs > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .data-tools {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .data-tool-popover {
        position: fixed;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }

    .form-grid,
    .sales-setup-primary,
    .sales-logistics-fields,
    .line-builder-controls,
    .production-assignment-grid,
    .dispatch-vehicle-fields,
    .shift-entry-form,
    .payment-confirm-form,
    .tab-fields,
    .workflow-truck-summary,
    .settings-create-user,
    .settings-user-access-form,
    .settings-reset-form,
    .reports-command-form,
    .gi-parameter-grid,
    .gi-param-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .form-span,
    .dispatch-vehicle-fields label:last-child,
    .payment-allocation-row label:nth-child(3),
    .workflow-truck-summary > div:nth-child(3),
    .workflow-truck-edit {
        grid-column: auto !important;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .form-stack input,
    .form-stack select,
    .form-stack textarea,
    .shift-entry-form input,
    .shift-entry-form select,
    .payment-confirm-form input,
    .payment-confirm-form select,
    .tab-fields input,
    .tab-fields select {
        width: 100%;
        min-height: 44px;
        font-size: 16px !important;
    }

    textarea {
        min-height: 96px;
    }

    .button,
    .command-primary,
    .table-action,
    .payment-action-primary,
    .payment-action-secondary,
    .quick-action-button,
    .record-command-bar button,
    .record-command-bar a,
    .entry-command-bar button,
    .entry-command-bar a,
    .data-tool-button,
    .gi-tool-btn {
        min-height: 44px;
    }

    .modal,
    body.erp-theme .modal,
    [data-entry-modal]:not(.sales-entry-modal) {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .modal-card,
    body.erp-theme .modal-card,
    [data-entry-modal]:not(.sales-entry-modal) .modal-card,
    .sales-entry-modal .modal-card,
    body.erp-theme .sales-entry-modal .modal-card {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .modal-header,
    .entry-command-bar,
    .record-command-bar,
    .line-add-popup-header,
    .cashier-close-popup-header {
        position: sticky;
        z-index: 3;
        top: 0;
    }

    .modal-header,
    .modal-card .form-grid,
    .line-add-popup-body,
    .cashier-close-popup-body {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .line-add-popup,
    .cashier-close-popup,
    .payment-confirm-popup {
        padding: 0;
        place-items: stretch;
    }

    .line-add-popup-card,
    .cashier-close-popup-card,
    .cashier-close-overview-card,
    .payment-confirm-card {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    body.erp-theme .status-footer,
    body.icon-rail-shell.erp-theme .status-footer,
    body.icon-rail-shell.rail-pinned.erp-theme .status-footer {
        height: 28px;
        padding: 0 10px;
    }

    body.erp-theme .status-footer-center,
    body.erp-theme .status-footer-credit,
    body.erp-theme .status-footer-role {
        display: none;
    }

    body.erp-theme .status-footer-active {
        width: 100%;
    }

    body.erp-theme .status-footer-active strong {
        max-width: calc(100vw - 38px);
    }
}

@media (max-width: 640px) {
    body.erp-theme .global-search span {
        display: none;
    }

    body.erp-theme .global-search {
        padding-left: 8px;
    }

    .metric-grid,
    .department-summary,
    .production-kpis,
    .payments-hub-grid,
    .reports-kpi-grid,
    .reports-kpi-grid-compact,
    .reports-catalog-kpis,
    .customer-stats,
    .sales-stats,
    .product-detail-kpis,
    .credit-aging-summary,
    .exception-grid,
    .quick-grid,
    .inventory-workspace-grid,
    .product-overview,
    .customer-overview,
    .sales-overview,
    .inventory-overview,
    .reports-dept-health,
    .reports-dept-grid,
    .reports-catalog-cards,
    .cashier-report-meta,
    .cashier-report-summary,
    .cashier-close-summary,
    .batch-certificate-grid,
    .invoice-totals,
    .gi-summary-strip {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .page-actions,
    .cashier-close-actions,
    .cashier-close-launcher-actions,
    .cashier-close-launch-actions,
    .cashier-close-form-actions,
    .form-actions,
    .workflow-load-actions,
    .line-add-popup-footer,
    .cashier-close-popup-footer {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions > *,
    .cashier-close-actions > *,
    .cashier-close-launcher-actions > *,
    .cashier-close-launch-actions > *,
    .cashier-close-form-actions > *,
    .form-actions > *,
    .workflow-load-actions > *,
    .line-add-popup-footer > *,
    .cashier-close-popup-footer > * {
        width: 100%;
    }

    .panel,
    .data-panel,
    .erp-widget,
    .erp-section,
    .cashier-close,
    .cashier-close-launcher,
    .cashier-close-overview,
    .cashier-close-history,
    .cashier-close-readonly {
        padding-right: 12px;
        padding-left: 12px;
    }

    .table-wrap table[data-table],
    .data-panel table[data-table],
    .erp-grid-panel table,
    .reports-table,
    .detail-table-wrap table {
        min-width: 680px;
    }

    .data-panel table.is-responsive-records {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
        background: transparent;
    }

    .data-panel table.is-responsive-records thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .data-panel table.is-responsive-records tbody,
    .data-panel table.is-responsive-records tr,
    .data-panel table.is-responsive-records td {
        display: block;
        width: 100%;
    }

    .data-panel table.is-responsive-records tr {
        overflow: hidden;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid var(--erp-border, #e5e7eb);
        border-radius: 7px;
        box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    }

    .data-panel table.is-responsive-records td {
        min-height: 42px;
        padding: 9px 11px 9px min(42%, 150px) !important;
        position: relative;
        border-bottom: 1px solid #edf0f2 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .data-panel table.is-responsive-records td:last-child {
        border-bottom: 0 !important;
    }

    .data-panel table.is-responsive-records td::before {
        content: attr(data-label);
        position: absolute;
        top: 10px;
        left: 11px;
        width: calc(min(42%, 150px) - 20px);
        overflow: hidden;
        color: var(--erp-text-muted, #6b7280);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.25;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .data-panel table.is-responsive-records .empty-table {
        padding: 22px 14px !important;
    }

    .data-panel table.is-responsive-records .empty-table::before {
        display: none;
    }

    .data-panel table.is-responsive-records .action-links,
    .data-panel table.is-responsive-records .product-row-actions,
    .data-panel table.is-responsive-records .payment-row-actions,
    .data-panel table.is-responsive-records .production-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .grid-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .cashier-report-head,
    .cashier-report-signoff,
    .invoice-header,
    .batch-certificate-head {
        grid-template-columns: 1fr !important;
        flex-direction: column;
        text-align: left;
    }

    .cashier-report-right,
    .invoice-right {
        text-align: left;
    }

    .login-panel {
        min-height: 100dvh;
        padding: 24px 16px;
    }

    .login-card {
        width: 100%;
    }
}

@media (max-width: 420px) {
    body.erp-theme .global-brand strong {
        display: none;
    }

    body.erp-theme .global-brand {
        padding-right: 4px;
        padding-left: 6px;
    }

    body.erp-theme .global-search {
        margin-right: 4px;
    }

    body.erp-theme .global-search input::placeholder {
        color: transparent;
    }

    body.erp-theme .topbar {
        min-height: 54px;
    }

    body.erp-theme .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .screen-commands {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .screen-commands button,
    .screen-commands a {
        flex: 0 0 auto;
        min-width: 96px;
    }

    .data-panel table.is-responsive-records td {
        padding-left: 11px !important;
        padding-top: 30px !important;
    }

    .data-panel table.is-responsive-records td::before {
        top: 8px;
        width: calc(100% - 22px);
    }
}

@media print {
    .mobile-nav-backdrop {
        display: none !important;
    }
}

/* =====================================================================
   PET360 mobile refinement v2
   Corrects the double mobile header offset and makes dashboard/module
   summaries genuinely compact instead of stacking every card vertically.
   ===================================================================== */

@media (max-width: 900px) {
    :root {
        --pet-mobile-topbar: 52px;
    }

    /* The global bar is fixed and removed from normal flow. Keeping body
       padding together with a sticky page header produced a second 52–56px
       empty strip. Let the sticky page header create the required offset. */
    body:not(.login-page),
    body.erp-theme:not(.login-page),
    body.m365-theme:not(.login-page) {
        padding-top: 0 !important;
    }

    body.erp-theme .global-bar,
    body.m365-theme .global-bar,
    .global-bar {
        height: var(--pet-mobile-topbar) !important;
    }

    body.erp-theme .menu-toggle,
    body.m365-theme .menu-toggle,
    .menu-toggle {
        width: 48px !important;
        height: var(--pet-mobile-topbar) !important;
        flex-basis: 48px !important;
    }

    body.icon-rail-shell.erp-theme aside.icon-rail,
    body.icon-rail-shell.m365-theme aside.icon-rail,
    body.erp-theme:not(.icon-rail-shell) .sidebar {
        top: var(--pet-mobile-topbar) !important;
    }

    body.icon-rail-shell.erp-theme .main-shell,
    body.icon-rail-shell.m365-theme .main-shell,
    body.icon-rail-shell.rail-pinned.erp-theme .main-shell,
    body.icon-rail-shell.rail-pinned.m365-theme .main-shell,
    .main-shell {
        min-height: 100dvh;
        margin-top: 0 !important;
    }

    body.erp-theme .topbar,
    body.m365-theme .topbar,
    .topbar {
        top: var(--pet-mobile-topbar) !important;
        min-height: 62px !important;
        padding: 8px 12px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        background: rgba(255, 255, 255, .98) !important;
    }

    body.erp-theme .topbar > div:first-child,
    body.m365-theme .topbar > div:first-child,
    .topbar > div:first-child {
        min-width: 0;
        overflow: hidden;
    }

    body.erp-theme .topbar h1,
    body.m365-theme .topbar h1,
    .topbar h1 {
        max-width: 100%;
        margin-top: 2px !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    body.erp-theme .breadcrumb,
    body.m365-theme .breadcrumb,
    .breadcrumb {
        max-width: 100%;
        font-size: 10px !important;
    }

    .screen-commands {
        width: auto !important;
        margin-left: auto !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    .screen-commands button,
    .screen-commands a {
        min-width: 76px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    body.erp-theme .content,
    body.erp-theme .content-gi,
    body.m365-theme .content,
    body.m365-theme .content-gi,
    .content,
    .content-gi {
        padding: 10px 10px 52px !important;
    }

    /* Keep key actions visible in one compact row rather than turning every
       pair of buttons into two full-width rows. */
    .workspace-title,
    .module-heading {
        min-height: 0 !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
    }

    .workspace-title h2,
    .module-heading h2 {
        margin-bottom: 3px !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
    }

    .workspace-title p,
    .module-heading p {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .workspace-title .page-actions {
        display: grid !important;
        grid-template-columns: minmax(90px, .75fr) minmax(170px, 1.55fr) !important;
        width: 100% !important;
        gap: 7px !important;
        flex-direction: initial !important;
    }

    .workspace-title .page-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .section-caption {
        margin: 12px 0 7px !important;
        padding: 0 2px !important;
    }

    .section-caption span {
        font-size: 10px !important;
        letter-spacing: .08em !important;
    }

    /* Two-column mobile summaries significantly reduce scrolling while each
       card remains wide enough for a clear label and value. */
    body .exception-grid,
    body .metric-grid,
    body .department-summary,
    body .production-kpis,
    body .reject-overview,
    body .payments-overview,
    body .credit-aging-summary,
    body .reports-kpi-grid,
    body .quick-grid,
    body .transaction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.erp-theme .exception-tile,
    body.m365-theme .exception-tile,
    .exception-tile {
        min-height: 82px !important;
        padding: 11px 10px 10px 14px !important;
    }

    body.erp-theme .exception-tile strong,
    body.m365-theme .exception-tile strong,
    .exception-tile strong {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(19px, 5.2vw, 23px) !important;
        line-height: 1.05 !important;
    }

    body.erp-theme .exception-tile small,
    body.m365-theme .exception-tile small,
    .exception-tile small {
        margin-top: 5px !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    /* Product, customer, sales, and inventory overview pages: hero occupies
       the full row, followed by compact 2-up KPI cards. */
    body .product-overview,
    body .customer-overview,
    body .sales-overview,
    body .inventory-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body .product-hero-card,
    body .customer-hero-card,
    body .sales-hero-card,
    body .inventory-hero-card {
        grid-column: 1 / -1 !important;
        min-height: 94px !important;
        padding: 14px 16px !important;
    }

    body .product-hero-card strong,
    body .customer-hero-card strong,
    body .sales-hero-card strong,
    body .inventory-hero-card strong {
        margin-top: 5px !important;
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    body .product-hero-card p,
    body .customer-hero-card p,
    body .sales-hero-card p,
    body .inventory-hero-card p {
        max-width: none !important;
        margin-top: 5px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    body .product-stat-card,
    body .customer-stat-card,
    body .sales-stat-card,
    body .inventory-stat-card {
        min-width: 0 !important;
        min-height: 78px !important;
        padding: 10px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body .product-stat-icon,
    body .customer-stat-icon,
    body .sales-stat-icon,
    body .inventory-stat-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    body .product-stat-card > div:last-child,
    body .customer-stat-card > div:last-child,
    body .sales-stat-card > div:last-child,
    body .inventory-stat-card > div:last-child {
        min-width: 0;
    }

    body .product-stat-card span,
    body .customer-stat-card span,
    body .sales-stat-card span,
    body .inventory-stat-card span {
        overflow: hidden;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .product-stat-card strong,
    body .customer-stat-card strong,
    body .sales-stat-card strong,
    body .inventory-stat-card strong {
        max-width: 100%;
        margin: 4px 0 0 !important;
        overflow: hidden;
        font-size: clamp(17px, 4.5vw, 21px) !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .product-stat-card small,
    body .customer-stat-card small,
    body .sales-stat-card small,
    body .inventory-stat-card small {
        display: none !important;
    }

    .customer-insight-bar,
    .product-insight-bar,
    .sales-insight-bar,
    .inventory-insight-bar {
        padding: 9px 10px !important;
        gap: 8px !important;
    }

    .customer-insight-metrics,
    .product-insight-metrics,
    .sales-insight-metrics,
    .inventory-insight-metrics {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px !important;
        font-size: 9px !important;
    }

    /* The create FAB remains convenient but no longer covers the last card or
       the fixed status strip. */
    body.erp-theme .record-command-bar:not(:has([data-stores-receive-selected])) .command-primary {
        right: 14px !important;
        bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
        width: 48px !important;
        height: 48px !important;
        box-shadow: 0 6px 18px rgba(15, 108, 189, .28) !important;
    }

    body.erp-theme .record-command-bar:not(:has([data-stores-receive-selected])) .command-primary::before {
        font-size: 24px !important;
    }
}

@media (max-width: 520px) {
    /* The full search field is not useful at phone width and was consuming
       almost half of the global header. It remains available on tablets. */
    body.erp-theme .global-search,
    body.m365-theme .global-search,
    .global-search {
        display: none !important;
    }

    body.erp-theme .global-brand,
    body.m365-theme .global-brand,
    .global-brand {
        min-width: 48px !important;
        padding: 0 8px !important;
        border-right: 0 !important;
    }

    body.erp-theme .global-brand strong,
    body.m365-theme .global-brand strong,
    .global-brand strong {
        display: none !important;
    }

    body.erp-theme .global-spacer,
    body.m365-theme .global-spacer,
    .global-spacer {
        display: block !important;
        flex: 1 1 auto !important;
    }

    body.erp-theme .global-user,
    body.m365-theme .global-user,
    .global-user {
        min-width: 48px !important;
        padding: 0 8px !important;
    }

    .screen-commands button,
    .screen-commands a {
        min-width: 72px !important;
        padding: 0 9px !important;
    }

    .workspace-title .page-actions {
        grid-template-columns: minmax(84px, .72fr) minmax(158px, 1.5fr) !important;
    }
}

@media (max-width: 360px) {
    body.erp-theme .topbar h1,
    body.m365-theme .topbar h1,
    .topbar h1 {
        font-size: 16px !important;
    }

    .screen-commands button,
    .screen-commands a {
        min-width: 64px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
    }

    .workspace-title .page-actions {
        grid-template-columns: 1fr 1.7fr !important;
    }

    body .product-stat-card,
    body .customer-stat-card,
    body .sales-stat-card,
    body .inventory-stat-card {
        padding: 9px 8px !important;
        gap: 6px !important;
    }

    body .product-stat-icon,
    body .customer-stat-icon,
    body .sales-stat-icon,
    body .inventory-stat-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* Mobile header flow correction: fixed global + page headers with explicit
   shell clearance prevents both the blank spacer and content overlap. */
@media (max-width: 900px) {
    body.erp-theme .topbar,
    body.m365-theme .topbar,
    .topbar {
        position: fixed !important;
        z-index: 30 !important;
        top: var(--pet-mobile-topbar) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    body.icon-rail-shell.erp-theme .main-shell,
    body.icon-rail-shell.m365-theme .main-shell,
    body.icon-rail-shell.rail-pinned.erp-theme .main-shell,
    body.icon-rail-shell.rail-pinned.m365-theme .main-shell,
    .main-shell {
        padding-top: calc(var(--pet-mobile-topbar) + 62px) !important;
    }

    body .customer-stat-card.accent-green strong,
    body .sales-stat-card.accent-green strong,
    body .inventory-stat-card.accent-green strong,
    body .product-stat-card.accent-green strong {
        font-size: 15px !important;
        letter-spacing: -.02em;
    }

    body.erp-theme .record-command-bar:not(:has([data-stores-receive-selected])) .command-primary {
        padding: 0 !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: center !important;
        color: transparent !important;
        line-height: 1 !important;
    }
}

@media (max-width: 900px) {
    body.icon-rail-shell.erp-theme .main-shell,
    body.icon-rail-shell.m365-theme .main-shell,
    body.icon-rail-shell.rail-pinned.erp-theme .main-shell,
    body.icon-rail-shell.rail-pinned.m365-theme .main-shell,
    .main-shell {
        width: 100% !important;
        margin-left: 0 !important;
    }
}