/* Mobile First - Small screens */
@media (max-width: 768px) {
    :root {
        --navbar-height: 56px;
        --sidebar-width: 280px;
    }
    
    .navbar {
        padding: 0 12px;
    }
    
    .navbar-brand {
        font-size: 18px;
    }
    
    .navbar-brand span {
        display: none;
    }
    
    .navbar-center {
        max-width: 200px;
        margin: 0 8px;
    }
    
    .search-bar-nav input {
        font-size: 13px;
        padding: 6px 6px 6px 8px;
    }
    
    .username {
        display: none;
    }
    
    .user-menu {
        padding: 4px;
    }
    
    #page-content {
        margin-left: 0;
        padding: 12px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-header h2 {
        font-size: 20px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card .value {
        font-size: 22px;
    }
    
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    
    .file-list-header,
    .file-list-item {
        grid-template-columns: 30px 2fr 1fr 60px;
        font-size: 13px;
    }
    
    .file-list-header .size-col,
    .file-list-item .size-col {
        display: none;
    }
    
    .modal {
        padding: 20px;
        width: 95%;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .login-card {
        padding: 32px 20px;
    }
    
    .breadcrumb {
        font-size: 13px;
        padding: 8px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .breadcrumb-item {
        white-space: nowrap;
    }
    
    .upload-zone {
        padding: 24px;
    }
    
    .upload-zone i {
        font-size: 32px;
    }
    
    .recent-item {
        padding: 10px 12px;
    }
    
    .recent-item .info .name {
        font-size: 13px;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .file-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .file-list-header,
    .file-list-item {
        grid-template-columns: 24px 2fr 50px;
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .file-list-header .date-col,
    .file-list-item .date-col {
        display: none;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .modal {
        padding: 16px;
    }
    
    .login-card {
        padding: 24px 16px;
    }
    
    .login-card h1 {
        font-size: 24px;
    }
    
    .toast {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .search-bar {
        flex-direction: column;
        width: 100%;
    }
    
    .search-bar input {
        min-width: unset;
        width: 100%;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .gallery-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Sidebar toggle for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 40;
}

.sidebar-overlay.show {
    display: block;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        transition: transform 0.25s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
}

/* Print */
@media print {
    .navbar,
    .sidebar,
    .upload-zone,
    .page-actions,
    #toast-container,
    #context-menu,
    #modal-container {
        display: none !important;
    }
    
    #page-content {
        margin-left: 0 !important;
        padding: 20px !important;
    }
}