@media (max-width: 600px) {

    body{
        overflow-x:hidden;
        overflow-y:auto;
    }
    .top-menu li {
        margin-right: 0px;
        margin-top:10px
    }
    .menu-right-ab {
        position: absolute;
        top: 11px;
        right: 10px;
    }
    .dashboard-widget{
        margin-bottom:15px;
    }
    .mb-sm-2{
        margin-bottom:15px;
    }
    .h-auto-sm{
        height:auto;
    }
    .prev-next-link{
        margin-bottom:10px !important;
        display:inline-block;
    }
     
    .pagination nav{
        display:flex
    }
    ul.pagination {
        display: flex !important;
    }
    .change-plan-block {
        margin-top: 15px;
        height: auto !important;
    }
    .bg-slider {
        height: auto;
    }

    .main-sidebar {
        position: static;
        width: 100%;
        height: auto;
        border: none !important;
    }

    .content-wrapper {
        padding:5px;
        margin-left: 0px;
    }
    .sidebar{
        width:0;
        height:0;
    }
    .mobile-menu {
        display: block;
        margin-right:15px;
        color:var(--primary-color)
    }
    .job-phases{
        padding:5px;
    }
    .job-phases .me-3{
        margin-right:0;
        margin-bottom:10px;
    }
    .filter-select .w-150px{
        width:100%;
        margin-bottom:10px;
    }
    .crew-table table th span {
        text-wrap: nowrap;
        padding-right: 10px;
        padding-left: 10px;
    }
    .prev-next-link span{
        display:none;
    }
    table thead .sorting, table thead .sorting_asc, table thead .sorting_desc, table thead .sorting_asc_disabled, table thead .sorting_desc_disabled {

        text-wrap: nowrap;
        padding-left: 10px;
    }
    #addUserForm .col, #updateUserForm .col {
        flex: 0 0 100%;
    }
    .fc-header-toolbar.fc-toolbar {
        display: block !important;
        text-align: center;
    }
    .fc-toolbar-chunk{
        margin-bottom:10px;
    }
    .status-pending{
        text-wrap:nowrap;
    }
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1037;
}

    .sidebar-overlay.active {
        display: block;
    }

/* ── Mobile header — hidden on desktop ── */
.mobile-header {
    display: none;
}

/* ===============================================
   TABLET & MOBILE  (max 991px)
   =============================================== */
@media (max-width: 991.98px) {

    /* Show mobile header */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: #fff;
        border-bottom: 1px solid #DDE5EE;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        z-index: 1050;
        padding: 0 16px;
    }

        .mobile-header .brand-image {
            height: 38px;
            object-fit: contain;
        }

        .mobile-header #mobileMenuToggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 1px solid #DDE5EE;
            border-radius: 6px;
            color: #333;
            font-size: 18px;
            cursor: pointer;
            background: #fff;
            transition: background 0.2s;
            text-decoration: none;
        }

            .mobile-header #mobileMenuToggle:hover {
                background: #f5f5f5;
            }

    /* Hide brand-link inside sidebar */
    .main-sidebar .brand-link {
        display: none !important;
    }

    /* CRITICAL: sidebar must stay fixed and off-screen */
    .main-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        height: calc(100vh - 56px) !important;
        width: 250px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        z-index: 1038 !important;
        overflow-y: auto !important;
    }

        /* Sidebar open state */
        .main-sidebar.sidebar-open {
            transform: translateX(0) !important;
        }

    /* Content wrapper — full width, pushed below header */
    .content-wrapper {
        margin-left: 0 !important;
        margin-top: 56px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    /* Sidebar scrollable area — keep row layout like desktop */
    .sidebar {
        height: 100% !important;
        overflow-y: auto;
        width: 100% !important;
    }

    /* Keep sidebar-inner as ROW — icons left, filter panel right */
    .sidebar-inner {
        flex-direction: row !important;
        height: 100%;
        background-color: #fff;
    }

    /* Icon column — fixed narrow width */
    .set-sidebar-h {
        width: 75px !important;
        min-width: 75px !important;
        border-right: 1px solid #DDE5EE !important;
        border-bottom: none !important;
        height: 100%;
        overflow-y: auto;
    }

    /* Nav items stay vertical column */
    ul.nav.nav-pills.nav-sidebar.flex-column {
        flex-direction: column !important;
        min-height: unset !important;
        padding: 4px 0 8px;
    }

    .nav-sidebar .nav-item {
        flex: 0 0 auto;
    }

        .nav-sidebar .nav-item a.nav-link {
            padding: 5px !important;
        }

    /* Filter panel fills remaining width */
    .filter-section {
        flex: 1;
        padding: 10px 14px 16px;
        overflow-y: auto;
        height: 100%;
    }
}

/* ===============================================
   SMALL MOBILE  (max 575px)
   =============================================== */
@media (max-width: 575.98px) {

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

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

    .global-search {
        width: 100%;
    }

    .top-menu li {
        margin-right: 0;
        margin-top: 10px;
    }

    .dashboard-widget {
        margin-bottom: 15px;
    }

    .mb-sm-2 {
        margin-bottom: 15px;
    }

    .prev-next-link {
        margin-bottom: 10px !important;
        display: inline-block;
    }

    .pagination nav {
        display: flex;
    }

    ul.pagination {
        display: flex !important;
    }

    .job-phases {
        padding: 5px;
    }

        .job-phases .me-3 {
            margin-right: 0;
            margin-bottom: 10px;
        }

    .filter-select .w-150px {
        width: 100%;
        margin-bottom: 10px;
    }

    .crew-table table th span {
        text-wrap: nowrap;
        padding-right: 10px;
        padding-left: 10px;
    }

    .prev-next-link span {
        display: none;
    }

    table thead .sorting,
    table thead .sorting_asc,
    table thead .sorting_desc,
    table thead .sorting_asc_disabled,
    table thead .sorting_desc_disabled {
        text-wrap: nowrap;
        padding-left: 10px;
    }

    #addUserForm .col,
    #updateUserForm .col {
        flex: 0 0 100%;
    }
}