/* =================================================================
   PAL INVENTORY — responsive.css
   Full layout responsive: topbar + sidebar + content
   Must be LAST in both bundle configs (after comfort.css)
   ================================================================= */

/* =================================================================
   TABLET  ≤ 1024px
   ================================================================= */
@media (max-width: 1024px) {

    #pal-brand {
        width: 200px !important;
        min-width: 160px !important;
    }

    .pal-tab {
        font-size: 11.5px !important;
        padding: 0 10px !important;
    }

    .pal-pill-btn {
        font-size: 11px !important;
        padding: 0 8px !important;
        height: 30px !important;
    }

    #pal-controls {
        gap: 4px !important;
        padding: 0 8px !important;
    }
}

/* =================================================================
   SMALL TABLET / MOBILE  ≤ 768px
   ================================================================= */
@media (max-width: 768px) {

    /* ── TOPBAR SHELL ── */

    #pal-topbar {
        height: 58px !important;
    }

        /* Brand block — anchor the hamburger cleanly, no dead space */
        #pal-topbar > div:first-child {
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            padding: 0 10px !important;
            flex-shrink: 0 !important;
            gap: 0 !important;
        }

            /* Hide logo on mobile — hamburger becomes the sole anchor */
            #pal-topbar > div:first-child > a {
                display: none !important;
            }

    #pal-hbg-btn {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    /* Hide the tabs strip entirely on mobile — sidebar is the nav */
    #pal-topbar > div:nth-child(2) {
        display: none !important;
        flex: 0 !important;
        width: 0 !important;
    }

    /* Right-side icon cluster — even spacing, no crowding */
    #pal-topbar > div:last-child {
        padding: 0 10px !important;
        gap: 6px !important;
        border: none !important;
    }

    #palBranchLabel,
    #palLangLabel {
        display: none !important;
    }

    .pal-pill-btn {
        padding: 0 8px !important;
        height: 36px !important;
        min-width: 36px !important;
        gap: 0 !important;
        border-radius: 9px !important;
    }

        .pal-pill-btn svg:last-of-type {
            display: none !important;
        }

    #palBellBtn {
        width: 40px !important;
        height: 40px !important;
    }

    #palUserBtn {
        padding: 0 4px !important;
        gap: 0 !important;
    }

        #palUserBtn > div:nth-child(2),
        #palUserBtn > svg:last-child {
            display: none !important;
        }

        #palUserBtn > div:first-child {
            width: 38px !important;
            height: 38px !important;
        }

    .pal-vline {
        display: none !important;
    }

    /* Dropdowns — full width, comfortably below the topbar */
    #palNotifDropdown,
    #palUserDropdown,
    #palBranchDropdown,
    #palLangDropdown {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        top: 66px !important;
    }

    /* ── SIDEBAR — mobile drawer ── */

    /* Content never reserves space for the sidebar on mobile —
       the drawer always floats ABOVE content, never beside it */
    body.m-aside-left--enabled .m-grid.m-grid--ver-desktop.m-body {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Base: sidebar is always full drawer size in the DOM, but pushed
       off-screen via transform. Animating transform is smooth and
       GPU-accelerated; animating width is not — this is what makes
       the open/close feel like a real native drawer instead of a
       layout reflow. */
    #m_aside_left,
    .m-aside-left {
        width: min(85vw, 320px) !important;
        min-width: min(85vw, 320px) !important;
        max-width: min(85vw, 320px) !important;
        height: 100% !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        transform: translateX(100%) !important;
        transition: transform .28s cubic-bezier(.32,.72,0,1) !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 0 40px rgba(20,16,40,.28) !important;
    }

    #m_ver_menu {
        height: 100% !important;
        max-height: 100% !important;
        padding-top: 56px !important;
    }

    /* Explicit close button — top-left corner of the drawer.
       Hidden everywhere except inside the open mobile drawer. */
    #m_aside_left_close_btn {
        display: none !important;
    }

    body.pal-sb-open #m_aside_left_close_btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 14px !important;
        right: calc(min(85vw, 320px) - 46px) !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
        background: #f0eeff !important;
        border: 1px solid #e4dffa !important;
        color: #5b4fcf !important;
        font-size: 15px !important;
        z-index: 10000 !important;
        cursor: pointer !important;
        transition: background .15s, transform .15s !important;
    }

        body.pal-sb-open #m_aside_left_close_btn:active {
            background: #e4dffa !important;
            transform: scale(.94) !important;
        }

    /* Open state — slide fully into view */
    body.pal-sb-open #m_aside_left,
    body.pal-sb-open .m-aside-left {
        transform: translateX(0) !important;
    }

    /* pal-sb-mini must never collapse the drawer on mobile — the
       drawer is always either fully open or fully off-screen, the
       68px icon-strip mode is a desktop-only concept */
    body.pal-sb-mini #m_aside_left,
    body.pal-sb-mini .m-aside-left {
        width: min(85vw, 320px) !important;
        min-width: min(85vw, 320px) !important;
        max-width: min(85vw, 320px) !important;
    }

    /* Dark backdrop behind the drawer — fades in/out, sits just below
       the drawer but above all page content */
    #palSbOverlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(20,16,40,.5) !important;
        z-index: 9998 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease !important;
    }

    body.pal-sb-open #palSbOverlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* Search box gets a bit more breathing room in the wider drawer */
    body.pal-sb-open .menu-search-container {
        padding: 14px 16px 10px !important;
    }

    /* Top-level menu items — larger touch targets in the drawer */
    body.pal-sb-open .m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {
        min-height: 48px !important;
        height: 48px !important;
    }

    /* Submenu items — larger touch targets, clearer rhythm */
    body.pal-sb-open .m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__subnav > .m-menu__item > .m-menu__link {
        min-height: 40px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    /* ── CONTENT ── */
    .m-grid__item.m-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    .m-body .m-content {
        padding: 8px 10px !important;
    }

    .m-portlet .m-portlet__body {
        padding: 0.8rem 1rem !important;
    }

    .m-portlet .m-portlet__head {
        height: 44px !important;
        padding: 0 1rem !important;
    }

    /* Tables — force horizontal scroll regardless of which wrapper
       class is actually present on this page (.table-responsive,
       DataTables' own wrapper, or Syncfusion's grid wrapper) */
    .table-responsive,
    .dataTables_wrapper,
    .m-datatable,
    .m-datatable__table,
    .e-grid .e-gridcontent,
    .e-grid .e-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }

        /* Tables themselves must not be force-shrunk — let them keep
       their natural width so the scroll above actually has
       something to scroll. A table squeezed to 100% width can't
       overflow its own wrapper, which silently defeats the
       overflow-x:auto rule above. */
        .table-responsive table,
        .dataTables_wrapper table,
        .m-datatable table,
        table.dataTable {
            width: auto !important;
            min-width: 100% !important;
        }

    /* If a table sits directly inside a portlet body with no
       wrapper at all, give the portlet body itself the scroll */
    .m-portlet .m-portlet__body:has(> table),
    .m-portlet .m-portlet__body:has(> .table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .m-form .col-form-label {
        padding-top: 4px !important;
        padding-bottom: 2px !important;
    }

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

/* =================================================================
   MOBILE  ≤ 480px
   ================================================================= */
@media (max-width: 480px) {

    #palBellBtn {
        width: 38px !important;
        height: 38px !important;
    }

    #palUserBtn {
        padding: 0 2px !important;
        gap: 0 !important;
    }

    .pal-pill-btn {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
    }

    .m-body .m-content {
        padding: 6px 6px !important;
    }

    .col-md-2, .col-md-3, .col-md-4, .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .btn {
        padding: .3rem .7rem !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: right !important;
        margin-bottom: 6px !important;
    }

    /* Drawer fills nearly the whole screen on small phones */
    #m_aside_left,
    .m-aside-left {
        width: 90vw !important;
        min-width: 90vw !important;
        max-width: 90vw !important;
    }

    body.pal-sb-mini #m_aside_left,
    body.pal-sb-mini .m-aside-left {
        width: 90vw !important;
        min-width: 90vw !important;
        max-width: 90vw !important;
    }

    body.pal-sb-open #m_aside_left_close_btn {
        right: calc(90vw - 46px) !important;
    }
}