/* Force sidebar to be visible on desktop */
@media (min-width: 641px) {
    .sidebar .collapse {
        display: block !important;
    }
    
    .sidebar .navbar-toggler {
        display: none !important;
    }
}

/* Mobile behavior - properly hide when collapsed */
@media (max-width: 640.98px) {
    .sidebar .collapse {
        display: none !important;
    }
    
    .sidebar .collapse.show {
        display: block !important;
    }
    
    .sidebar .navbar-toggler {
        display: block !important;
    }
}

/* Ensure proper sidebar layout */
.sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Fix page layout */
.page {
    display: flex !important;
    flex-direction: row !important;
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 640.98px) {
    .page {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
}

/* Fix main content area */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ensure top row is properly positioned */
.top-row {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Fix top row styling */
main .top-row {
    background-color: #f7f7f7 !important;
    color: #333 !important;
    border-bottom: 1px solid #d6d5d5 !important;
}

main .top-row a, 
main .top-row .btn-link {
    color: #333 !important;
}

/* Fix sidebar nav text to be white */
.sidebar .navbar-brand,
.sidebar .nav-item a,
.sidebar .nav-link,
.sidebar .navbar-dark .navbar-brand {
    color: white !important;
}

.sidebar .nav-item a.active,
.sidebar .nav-link.active {
    background-color: rgba(255,255,255,0.25) !important;
    color: white !important;
}

.sidebar .nav-item a:hover,
.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: white !important;
}