@import url("mobile-nav.css?v=20260713a");
@import url("portal-mobile.css?v=20260713a");
@import url("mobile-content.css?v=20260713a");

/* ============================================================
   Global responsive behaviour for the SU ERP master layouts.
   The portals use a 3-column HTML table (header / sidebar nav /
   content). On phones/tablets we stack it and let wide data
   tables scroll horizontally instead of forcing desktop zoom.
   Works together with the viewport meta tag added to each master.
   ============================================================ */

/* Never let images (header banner, lines, logos) overflow the screen */
img { max-width: 100%; height: auto; }

/* The old head.png banner row and its mobile cropping rules lived here. The banner is gone from
   the markup, so the rules that shrank, cropped and hid it are gone too. */

/* Tablet and below: stack the master layout table */
@media (max-width: 860px) {

    /* The main layout table and its rows/cells become block-level so the
       sidebar navigation stacks above the page content (full width). */
    table.auto-style1,
    table.auto-style1 > tbody,
    table.auto-style1 > tbody > tr,
    table.auto-style1 > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Narrow spacer column between nav and content — not the main content cell */
    table.auto-style1 td.su-layout-spacer,
    table.auto-style1 .auto-style3 + td.su-layout-spacer { display: none !important; }

    /* DevExpress top menu fills the width when stacked (no-JS fallback) */
    .auto-style1 .dxm-ltr { width: 100% !important; }

    /* Wide tables: scroll inside .su-table-scroll wrappers (see portal-mobile.css) */
    body:not(.su-shell-ready) td.auto-style2,
    body:not(.su-shell-ready) td.su-main-content,
    body:not(.su-shell-ready) .page-wrap,
    body:not(.su-shell-ready) .erp-dash,
    body:not(.su-shell-ready) .erp-dash-shell {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Card / KPI grids collapse to a single column */
    .erp-kpi-grid, .erp-stat-grid, .ad-grid-cards, .mf-cards, .crm-grid {
        grid-template-columns: 1fr !important;
        display: grid;
    }

    /* Padding tuned in portal-mobile.css when shell is active */
    body:not(.su-shell-ready) .erp-dash,
    body:not(.su-shell-ready) .ap-wrap,
    body:not(.su-shell-ready) .crm-wrap,
    body:not(.su-shell-ready) .mf-container,
    body:not(.su-shell-ready) .im-wrap,
    body:not(.su-shell-ready) .rt-wrap,
    body:not(.su-shell-ready) .tt-wrap,
    body:not(.su-shell-ready) .ae-wrap,
    body:not(.su-shell-ready) .gd-wrap,
    body:not(.su-shell-ready) .att-wrap,
    body:not(.su-shell-ready) .cp-wrap {
        padding: 12px !important;
    }

    .ux-search-input { max-width: 60vw; }
}

/* Mobile nav: see mobile-nav.css — hide drawer chrome on desktop only */
.su-nav-backdrop,
.su-nav-drawer-head { display: none; }

@media (max-width: 860px) {
    /* Hide sidebar from stacked layout until drawer script runs (stops login "flash") */
    table.auto-style1 > tbody > tr > td.auto-style3:not(.su-navcell) {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Main page content (must stay visible — nav drawer is mounted on body) */
    table.auto-style1 > tbody > tr.su-layout-main > td.su-main-content,
    table.auto-style1 > tbody > tr > td.su-main-content,
    table.auto-style1 > tbody > tr.su-layout-main > td:last-child:not(.auto-style3):not(.su-navcell) {
        display: block !important;
        width: 100% !important;
        min-height: 120px;
        visibility: visible !important;
    }

    body.su-shell-ready table.auto-style1 > tbody > tr.su-layout-main > td.su-main-content,
    body.su-shell-ready table.auto-style1 > tbody > tr > td.su-main-content,
    body.su-shell-ready table.auto-style1 > tbody > tr.su-layout-main > td:last-child:not(.auto-style3):not(.su-navcell) {
        overflow-x: hidden !important;
    }

    table.auto-style1 > tbody > tr.su-layout-main .erp-dash,
    table.auto-style1 > tbody > tr > td.su-main-content .erp-dash {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.auto-style1 > tbody > tr.su-layout-main .erp-kpi-grid,
    table.auto-style1 > tbody > tr > td.su-main-content .erp-kpi-grid {
        display: grid !important;
        visibility: visible !important;
    }

    /* Footer after main content when rows stack as blocks */
    table.auto-style1 > tbody {
        display: flex !important;
        flex-direction: column !important;
    }

    table.auto-style1 > tbody > tr.su-layout-footer {
        order: 100;
    }

    table.auto-style1 > tbody > tr.su-layout-main {
        order: 50;
        flex: 1 1 auto;
    }

    html.su-nav-open body table.auto-style1 {
        pointer-events: none;
        user-select: none;
    }

    html.su-nav-open .su-navcell,
    html.su-nav-open .su-nav-backdrop {
        pointer-events: auto;
    }
}

/* Phones: tighten typography and force form inputs to be finger-friendly */
@media (max-width: 520px) {
    .erp-dash-header h1, .ar-page-title, .crm-title { font-size: 18px !important; }
    input[type=text], input[type=password], input[type=email], select, textarea {
        max-width: 100% !important;
        font-size: 16px;  /* >=16px stops iOS auto-zoom on focus */
    }
    .ux-search-input { max-width: 48vw; }
}