/*
 * RESPONSIVE MODULE - Synergia AI
 * Mobile and tablet responsive styles
 */

/* === MOBILE MENU TOGGLE === */
.mobile-menu-toggle { 
    display: none; 
}

/* === MOBILE STYLES === */
@media (max-width: 768px) {
    /* Navigation adjustments */
    .main-navigation-overlay {
        width: 100vw;
        right: -100vw;
    }
    
    .nav-sidebar-header {
        padding: 20px 25px;
    }
    
    .nav-sidebar-title {
        font-size: 18px;
    }
    
    .main-navigation-overlay .menu-item a {
        padding: 18px 25px;
        font-size: 18px;
    }
    
    .nav-menu-icon {
        width: 24px;
        height: 24px;
        margin-right: 18px;
    }
    
    /* App panel adjustments */
    .synergia-sidebar { 
        position: absolute; 
        transform: translateX(-100%); 
        z-index: var(--z-sidebar-mobile); 
    }
    
    .sidebar-is-open .synergia-sidebar { 
        transform: translateX(0); 
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); 
    }
    
    /* Mobile menu toggle */
    .mobile-menu-toggle { 
        display: flex; 
        flex-direction: column; 
        justify-content: space-around; 
        width: 44px; 
        height: 44px; 
        background: rgba(0,0,0,0.5); 
        border: 1px solid rgba(255, 255, 255, 0.1); 
        border-radius: 8px; 
        cursor: pointer; 
        padding: 10px; 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        z-index: var(--z-mobile-toggle); 
    }
    
    .toggle-icon-bar { 
        display: block; 
        width: 100%; 
        height: 2px; 
        background-color: #fff; 
        border-radius: 1px; 
        transition: all 0.3s ease-in-out; 
    }
    
    .sidebar-is-open .mobile-menu-toggle .toggle-icon-bar:nth-child(1) { 
        transform: translateY(7px) rotate(45deg); 
    }
    
    .sidebar-is-open .mobile-menu-toggle .toggle-icon-bar:nth-child(2) { 
        opacity: 0; 
    }
    
    .sidebar-is-open .mobile-menu-toggle .toggle-icon-bar:nth-child(3) { 
        transform: translateY(-7px) rotate(-45deg); 
    }
    
    /* App panel mobile */
    .synergia-app-panel {
        min-height: calc(100vh - var(--header-height));
        height: auto;
    }
    
    #synergia-app-frame {
        min-height: 500px;
    }
}

/* === TABLET STYLES === */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-navigation-overlay {
        width: 400px;
    }
    
    .synergia-sidebar {
        width: 280px;
    }
}

/* === LARGE DESKTOP === */
@media (min-width: 1400px) {
    .site-header-inner {
        max-width: 1800px;
    }
    
    .synergia-sidebar {
        width: 300px;
    }
}