@media screen and (max-width: 768px) {
    :root {
        --sidebar-width: 0;
    }
    
    .sidebar {
        width: 250px;
        right: -280px;
        z-index: 9999;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.active {
        right: 0;
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .main-content {
        margin-right: 0;
        padding: 1.5rem;
    }
    
    .header-container {
        padding: 0 1rem;
    }
    
    .app-brand h1 {
        display: none;
    }
    
    .user-name {
        display: none;
    }
    
    .drup-menu {
        left: 0px;
        right:auto;
    }
    
    .footer-content {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-left {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-links {
        gap: 1rem;
    }
    
    .modal-content {
        width: 95%;
    }
}