/* ==========================================
   Responsive Styles
   ========================================== */

@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 200;
    }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu-btn { display: block; }
    .stats-grid { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left, .toolbar-right { width: 100%; }
    .search-box input { width: 100%; }
    .form-row { grid-template-columns: 1fr; }
    .report-filters { flex-direction: column; }
    .invoice-detail-header { grid-template-columns: 1fr; }
    .modal-content { max-width: 100%; margin: 10px; }
    .page-content { padding: 16px; }
    .topbar { padding: 0 16px; }
}

@media (max-width: 480px) {
    .login-card { padding: 24px; }
    .stat-card { flex-direction: column; text-align: center; }
    .stat-icon { margin: 0 auto; }
    .pagination { flex-direction: column; align-items: center; }
}