@media (max-width: 1024px) {
    .chart-grid { grid-template-columns: 1fr; }
    .top-products { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr 1fr; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar-close-btn { display: block; }
    .sidebar-overlay.show { display: block; }
    .main-content { margin-left: 0; }
    .menu-toggle-btn { display: block; }
    .topbar { padding: 0 16px; }
    .page-content { padding: 16px; }
    .dollar-widget { display: none; }
    .topbar-user-name { display: none; }
    .form-row { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .kpi-card { padding: 16px; }
    .kpi-value { font-size: 1.4rem; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .filter-bar { flex-direction: column; }
    .filter-bar select, .filter-bar input { width: 100%; }
    .modal { width: 95%; max-height: 90vh; }
    .modal-lg { max-width: 95%; }
    .table-pagination { flex-direction: column; text-align: center; }
    .data-table thead { display: none; }
    .data-table tbody tr {
        display: block; padding: 12px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px; border-radius: var(--radius);
        background: var(--bg-surface);
    }
    .data-table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0; border-bottom: 1px solid var(--border-light);
    }
    .data-table td::before {
        content: attr(data-label);
        font-weight: 600; font-size: 0.8rem; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.3px;
    }
    .data-table td:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
    .login-card { padding: 28px 20px; }
    .login-header h1 { font-size: 1.3rem; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 1.2rem; }
    .kpi-label { font-size: 0.7rem; }
    .page-content { padding: 12px; }
    .toast-container { right: 10px; left: 10px; max-width: none; }
    .toast { min-width: auto; }
    .chart-container { min-height: 200px; }
}