/**
 * Responsive Styles
 * Mobile-first responsive design for the platform
 */

/* Mobile Navigation Sidebar */
@media (max-width: 1024px) {
    .nav-mobile-toggle {
        display: block;
    }
    
    .nav-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }
    
    .nav-sidebar.mobile-open {
        transform: translateX(0);
    }
    
    body.has-nav-sidebar {
        padding-left: 0;
    }
    
    body.has-nav-sidebar .navbar {
        margin-left: 0;
    }
    
    body.has-nav-sidebar .container {
        margin-left: 0;
        padding-left: 1rem;
    }
    
    body.nav-sidebar-open {
        overflow: hidden;
    }
    
    body.nav-sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(44, 44, 44, 0.5);
        z-index: 99;
    }
    
    .nav-sidebar.collapsed {
        width: var(--sidebar-width);
    }
    
    .nav-sidebar.collapsed .nav-sidebar-brand-text,
    .nav-sidebar.collapsed .nav-sidebar-link-text {
        opacity: 1;
        display: block;
    }
    
    .nav-sidebar.collapsed .nav-sidebar-link {
        justify-content: flex-start;
        padding: var(--spacing-base) var(--spacing-lg);
    }
    
    .nav-sidebar.collapsed .nav-sidebar-user-info,
    .nav-sidebar.collapsed .nav-sidebar-user-arrow {
        display: flex;
    }
    
    .nav-sidebar.collapsed .nav-sidebar-user-toggle {
        justify-content: flex-start;
        padding: var(--spacing-sm) var(--spacing-base);
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 var(--spacing-base);
    }
    
    .nav-brand a {
        font-size: 1.25rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-base);
    }
    
    .page-header h1 {
        font-size: 1.75rem;
        margin-right: 0;
    }
    
    .container {
        padding: 0 var(--spacing-base) var(--spacing-xl);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .nav-brand a {
        font-size: 1.125rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
}

/* Sidebar Responsive */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: -280px;
        transition: left var(--transition-base);
        z-index: 999;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    body.has-sidebar .container {
        margin-left: 0;
    }
    
    /* Sidebar overlay on mobile */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(44, 44, 44, 0.5);
        z-index: 998;
    }
}