@import url("mobile-nav.css?v=20260610e");
@import url("portal-mobile.css?v=20260610g");
@import url("mobile-content.css?v=20260618a");

/* ============================================================
   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; }

/* Soroti University header banner — crop empty right, keep logo/text on left */
@media (max-width: 860px) {
    body.su-shell-ready table.auto-style1 > tbody > tr:first-child {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    body:not(.su-shell-ready) table.auto-style1 > tbody > tr:first-child > td.su-header-cell,
    body:not(.su-shell-ready) table.auto-style1 > tbody > tr:first-child > td {
        padding: 0 !important;
        margin: 0 !important;
        height: clamp(52px, 16vw, 68px);
        max-height: 68px;
        overflow: hidden !important;
        line-height: 0;
        background-color: #c5c1b8;
    }
    body:not(.su-shell-ready) .su-header-slot {
        display: block;
        width: 100%;
        height: clamp(52px, 16vw, 68px);
        overflow: hidden;
        background-color: #c5c1b8;
    }
    body:not(.su-shell-ready) table.auto-style1 > tbody > tr:first-child img[src*="head.png"],
    body:not(.su-shell-ready) table.auto-style1 > tbody > tr:first-child img[src*="Head.png"],
    body:not(.su-shell-ready) .su-header-slot img {
        display: block;
        width: 100% !important;
        max-width: none !important;
        height: clamp(52px, 16vw, 68px) !important;
        min-height: 100% !important;
        margin: 0 !important;
        object-fit: cover;
        object-position: left center;
        background-color: #c5c1b8;
    }
}

/* 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 nav/menu controls fill the width when stacked */
    .auto-style1 .dxnb,
    .auto-style1 .dxnbControl,
    .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;
    }

    /* The top toolbar (search + notifications) wraps instead of overflowing */
    .ux-toolbar { flex-wrap: wrap; gap: 8px; }
    .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; }

.su-mobile-bar { display: none; }

@media (max-width: 860px) {
    body:not(.su-shell-ready) .su-mobile-bar { display: block !important; }

    /* 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,
    html.su-nav-open .su-mobile-bar,
    html.su-nav-open .su-mobile-bar-row {
        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; }
}