/* ==========================================================================
   OREBIT EIS - MOBILE STYLES & OVERRIDES (Standardized)
   ========================================================================== */

/* 1. FORCE MODAL TO BE ON TOP OF EVERYTHING (Z-Index War Fix) */
.modal-backdrop {
    z-index: 100003 !important;
}

.modal {
    z-index: 100004 !important;
}

/* 2. Modal Content Scroll Fix */
.modal-content {
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto;
    padding-bottom: 80px;
    /* Space for footer */
}

.modal-footer {
    position: fixed;
    bottom: 60px !important;
    /* Above Bottom Nav */
    width: 100%;
    background: white;
    z-index: 100005 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

/* 3. Mobile Layout Adjustments */
@media (max-width: 768px) {

    /* Hide Main Sidebar & Toggle by default? No, we need Toggle visible */
    .main-sidebar {
        /* display: none !important; */
        /* Keep sidebar DOM for functionality but handle visibility via class */
        z-index: 10001;
        /* Lower than modal */
    }

    .main-header .navbar {
        margin-left: 0;
    }

    .main-header .logo {
        width: 100%;
        text-align: center;
    }

    /* Make room for bottom nav */
    body {
        padding-bottom: 70px;
    }

    /* 4. Bottom Navigation Bar */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        /* Below Modal */
    }

    .mobile-nav-item {
        text-align: center;
        color: #6c757d;
        font-size: 12px;
        flex: 1;
        /* Distribute evenly */
        cursor: pointer;
        padding: 5px 0;
    }

    .mobile-nav-item i {
        display: block;
        font-size: 20px;
        margin-bottom: 2px;
    }

    .mobile-nav-item.active {
        color: #007bff;
        font-weight: bold;
    }
}

/* Hide Bottom Nav on Desktop */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}