/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .sidebar { 
        width: 70px; 
        padding: 1rem 0; 
    }
    
    .sidebar-header { 
        padding: 0 0.5rem 1rem; 
        text-align: center; 
    }
    
    .sidebar-header h1 { 
        font-size: 1.1rem; 
        letter-spacing: -1px; 
    }
    
    .sidebar-header p { 
        display: none; 
    }
    
    .sidebar-nav button { 
        padding: 1rem 0.5rem; 
        justify-content: center; 
        font-size: 0.8rem; 
    }
    
    .theme-toggle { 
        margin: 1rem 0.5rem; 
        padding: 0.6rem; 
    }
    
    .container { 
        margin-left: 70px; 
        width: calc(100% - 70px); 
        padding: 1.5rem; 
    }
    
    .section h2 { 
        font-size: 1.5rem; 
    }
    
    .cards { 
        grid-template-columns: 1fr; 
    }
    
    .cards .card span { 
        font-size: 2.5rem; 
    }
    
    .dashboard-grid { 
        grid-template-columns: 1fr; 
    }
    
    .settings-grid { 
        grid-template-columns: 1fr; 
    }
    
    .analytics-stats { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .analytics-charts { 
        grid-template-columns: 1fr; 
    }
    
    .footer { 
        margin-left: 70px; 
        width: calc(100% - 70px); 
        padding: 1rem; 
    }
    
    .footer p { 
        font-size: 0.75rem; 
    }
    
    form { 
        padding: 1.5rem; 
    }
}