/* Comprehensive Sidebar Layout Fix */

/* Main container flex layout - only apply to dashboard pages with sidebar */
.dashboard-layout .container-fluid {
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
}

/* Row layout for sidebar and content - only apply to dashboard pages */
.dashboard-layout .row {
    display: flex !important;
    flex: 1;
    margin: 0 !important;
}

/* Sidebar column - only apply to pages with actual sidebar navigation */
.dashboard-layout .col-lg-2, 
.dashboard-layout .col-md-3,
.side-nav-container {
    position: fixed !important;
    top: 70px; /* Account for navbar height */
    left: 0;
    width: 250px !important;
    height: calc(100vh - 70px) !important;
    z-index: 1000;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0 !important;
    overflow: hidden;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Main content area - only adjust for dashboard pages with sidebar */
.dashboard-layout .col-lg-10, 
.dashboard-layout .col-md-9,
.has-sidebar .col-lg-10,
.has-sidebar .col-md-9 {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    flex: 1 !important;
    padding: 20px;
    min-height: calc(100vh - 70px);
}

/* Reset for regular pages without sidebar */
.col-lg-10, .col-md-9 {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Bug Fix #4: Sidebar navigation improvements */
.side-nav {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    padding: 20px 0 40px 0 !important;
    background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

.side-nav::-webkit-scrollbar {
    width: 5px;
}

.side-nav::-webkit-scrollbar-track {
    background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.side-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Navigation links styling */
.side-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    margin: 2px 10px;
    border-radius: 8px !important;
}

.side-nav .nav-link:hover,
.side-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    transform: translateX(5px);
}

.side-nav .nav-link i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* Responsive breakpoints */
@media (max-width: 1199.98px) {
    .col-lg-2 {
        width: 220px !important;
    }
    
    .col-lg-10 {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
    }
}

@media (max-width: 991.98px) {
    .col-lg-2, .col-md-3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        z-index: auto;
        margin-bottom: 20px;
    }
    
    .col-lg-10, .col-md-9 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .side-nav {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 20px 0 !important;
    }
    
    .side-nav .nav-link {
        margin: 2px 0;
        border-radius: 8px !important;
    }
}

@media (max-width: 767.98px) {
    .col-lg-2, .col-md-3 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        margin: 10px;
        width: calc(100% - 20px) !important;
    }
    
    .side-nav {
        padding: 15px 0 !important;
    }
    
    .side-nav .nav-link {
        padding: 10px 15px !important;
        margin: 2px 5px;
    }
}

/* Fix for dashboard layout specifically */
.dashboard-layout .row {
    align-items: stretch !important;
}

.dashboard-layout .col-lg-2 {
    display: flex !important;
    flex-direction: column;
}

.dashboard-layout .col-lg-10 {
    display: flex !important;
    flex-direction: column;
}

/* Ensure no floating or absolute positioning conflicts */
.side-nav ul,
.side-nav li {
    position: static !important;
    float: none !important;
}

/* Fix for any Bootstrap conflicts */
.row > * {
    flex-shrink: 0 !important;
}

/* Prevent sidebar from jumping on page load */
.sidebar-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-loaded {
    opacity: 1;
}