/* Navigation Responsive Fix - Improves navigation display on smaller screens */

/* Container width adjustments for better fit on smaller screens */
@media (max-width: 1400px) {
    .modern-navbar .container,
    .admin-nav .container {
        max-width: 100%;
        padding: 0 15px;
    }
}

/* Adjust navigation items spacing for laptop screens */
@media (max-width: 1200px) {
    .modern-navbar .nav-link,
    .modern-navbar .btn-modern {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem;
    }
    
    .admin-nav .nav-link {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem;
    }
    
    .admin-nav .nav-link span {
        display: inline-block;
    }
    
    .badge-count {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        min-width: 18px;
    }
}

/* Tablet and smaller laptop screens */
@media (max-width: 991.98px) {
    /* Main navbar adjustments */
    .modern-navbar {
        padding: 0.5rem 0 !important;
    }
    
    .modern-navbar .navbar-brand img {
        height: 40px;
    }
    
    /* Admin nav becomes scrollable horizontally on tablets */
    .admin-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: sticky;
        top: 60px;
    }
    
    .admin-nav .navbar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        min-width: max-content;
        padding-bottom: 0.5rem;
    }
    
    .admin-nav .nav-item {
        flex-shrink: 0;
    }
    
    .admin-nav .nav-link {
        white-space: nowrap;
        width: auto !important;
    }
    
    /* Adjust sticky positioning */
    body.admin-page .all_wrap {
        margin-top: 120px !important;
    }
}

/* Small tablets and large phones */
@media (max-width: 768px) {
    /* Hide text labels, show only icons in admin nav */
    .admin-nav .nav-link span {
        display: none;
    }
    
    .admin-nav .nav-link {
        padding: 0.75rem !important;
        justify-content: center;
    }
    
    .admin-nav .nav-icon {
        font-size: 1.2rem;
        margin: 0 !important;
    }
    
    /* Show badges as small dots */
    .badge-count {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
        min-width: 16px;
    }
    
    .admin-nav .nav-item {
        position: relative;
    }
}

/* Mobile phones */
@media (max-width: 576px) {
    /* Stack navigation vertically on mobile */
    .modern-navbar .navbar-nav {
        gap: 0.25rem !important;
    }
    
    .admin-nav {
        display: none !important; /* Hide admin nav on mobile, functionality merged into main nav */
    }
    
    /* Show admin items in main navbar on mobile */
    .modern-navbar .admin-nav-items {
        display: block !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    /* Adjust container padding */
    .modern-navbar .container,
    body.admin-page .container {
        padding: 0 10px;
    }
    
    /* Adjust content spacing */
    body.admin-page .all_wrap {
        margin-top: 70px !important;
    }
}

/* Fix for overlapping navigation items */
.modern-navbar .navbar-nav {
    flex-wrap: wrap;
}

/* Ensure proper z-index layering */
.modern-navbar {
    z-index: 1040 !important;
}

.admin-nav {
    z-index: 1030 !important;
}

/* Smooth transitions */
.modern-navbar,
.admin-nav,
.nav-link,
.badge-count {
    transition: all 0.3s ease;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    .nav-link,
    .btn-modern {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Fix for horizontal scrollbar on admin nav */
.admin-nav::-webkit-scrollbar {
    height: 6px;
}

.admin-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.admin-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.admin-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Dark mode adjustments for better visibility */
@media (prefers-color-scheme: dark) {
    .modern-navbar,
    .admin-nav {
        background: rgba(10, 10, 10, 0.98) !important;
    }
}

/* Print styles - hide navigation */
@media print {
    .modern-navbar,
    .admin-nav {
        display: none !important;
    }
    
    body.admin-page .all_wrap {
        margin-top: 0 !important;
    }
}