/* Tablet */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .charts-grid { grid-template-columns: 1fr; } .analytics-grid { grid-template-columns: 1fr; } .search-box { width: 200px; } } /* Mobile */ @media (max-width: 768px) { .sidebar { position: fixed; left: -260px; height: 100vh; z-index: 1000; } .sidebar.active { left: 0; } .mobile-toggle { display: block; } .navbar { padding: 0 16px; } .search-box { display: none; } .content { padding: 16px; } .stats-grid { grid-template-columns: 1fr; } .page-header { flex-direction: column; align-items: flex-start; gap: 16px; } .table-controls { flex-direction: column; align-items: stretch; } .search-filter { flex-direction: column; } .search-filter input { max-width: 100%; } .table-container { overflow-x: auto; } .data-table { min-width: 600px; } .products-grid { grid-template-columns: 1fr; } .login-container { flex-direction: column; } .login-left { display: none; } .login-right { flex: 1; } .toast-container { left: 16px; right: 16px; } .toast { min-width: auto; } } @media (max-width: 480px) { .navbar-right { gap: 8px; } .page-header h1 { font-size: 24px; } .stat-value { font-size: 24px; } .modal-content { width: 95%; } }