/* Mobile Sidebar Styles - Fullscreen */
@media (max-width: 768px) {
    .sidebar {
        width: 100vw;
        left: -100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .sidebar-header {
        padding: 16px;
    }
    
    .sidebar-header h2 {
        font-size: 18px;
    }
    
    .sidebar-content {
        padding: 16px 0;
        height: calc(100vh - 68px);
    }
    
    .sidebar-nav {
        padding: 0 16px;
    }
    
    .nav-item {
        padding: 14px 16px;
        font-size: 16px;
    }
    
    .nav-icon {
        width: 22px;
        height: 22px;
    }
    
    .sidebar-footer {
        padding: 16px;
    }
    
    .theme-toggle {
        padding: 14px 16px;
        font-size: 16px;
    }
    
    .theme-toggle .btn-icon {
        width: 22px;
        height: 22px;
    }
}

/* iPhone SE and smaller devices */
@media (max-width: 375px) {
    .sidebar {
        width: 100vw;
        left: -100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .sidebar-header {
        padding: 12px;
    }
    
    .sidebar-header h2 {
        font-size: 16px;
    }
    
    .sidebar-content {
        padding: 12px 0;
        height: calc(100vh - 60px);
    }
    
    .sidebar-nav {
        padding: 0 12px;
    }
    
    .nav-item {
        padding: 12px 14px;
        font-size: 15px;
    }
    
    .nav-icon {
        width: 20px;
        height: 20px;
    }
    
    .sidebar-footer {
        padding: 12px;
    }
    
    .theme-toggle {
        padding: 12px 14px;
        font-size: 15px;
    }
    
    .theme-toggle .btn-icon {
        width: 20px;
        height: 20px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) were (orientation: landscape) {
    .sidebar {
        width: 100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .sidebar-content {
        height: calc(100vh - 60px);
    }
    
    .nav-item {
        padding: 10px 16px;
        margin-bottom: 2px;
    }
    
    .sidebar-footer {
        padding: 12px;
    }
    
    .theme-toggle {
        padding: 10px 16px;
    }
}