/* Consolidated responsive rules for max-width: 768px */
@media (max-width: 768px) {
    /* Forms and grids */
    .form-grid.two-columns { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; gap: 8px; }
    .form-actions .btn { width: 100%; }

    /* Modals */
    .modal-container { margin: 16px; max-width: calc(100vw - 32px); }
    .modal-header, .modal-body, .modal-footer, .modal-actions { padding: 16px; }

    /* Dashboard/layout */
    .welcome-card { flex-direction: column; text-align: center; gap: 24px; }
    .stats-grid { grid-template-columns: 1fr; gap: 16px; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
    .dashboard-card { padding: 24px; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .activity-item { flex-direction: column; align-items: flex-start; text-align: left; }

    /* Login */
    .eventflow-login-container { flex-direction: column; }
    .eventflow-sidebar { display: none; }
    .eventflow-login-section { padding: 24px; flex: 1; }
    .eventflow-login-form { padding: 24px; }
    .login-header h2 { font-size: 1.75rem; }
    .demo-account { flex-direction: column; gap: 4px; }

    /* Buttons (touch-friendly) */
    .btn { padding: 14px 18px; min-height: 44px; }
    .btn-sm { padding: 10px 14px; min-height: 36px; }
    .btn-lg { padding: 18px 22px; min-height: 52px; }
    .tab-button { padding: 12px 16px; min-height: 44px; font-size: var(--font-size-sm, 13px); }
    .btn-status-prev, .btn-status-next { padding: 10px; min-height: 36px; min-width: 36px; }

    /* Sidebar/Main layout */
    .sidebar { position: fixed; left: -280px; top: 0; height: 100vh; z-index: 1000; }
    .sidebar.show { left: 0; }
    .main-content { margin-left: 0; }
    .top-bar { padding: 0 1rem; }
    .content-area { padding: 1rem; }
}

/* Extra small screens */
@media (max-width: 480px) {
    .form-actions .btn, .btn, .btn-group .btn { width: 100%; }
    .btn-group { flex-direction: column; width: 100%; }
    .welcome-card, .stat-card, .dashboard-card { padding: 16px; }
    .welcome-title { font-size: 1.5rem; }
    .card-content h3 { font-size: 1.25rem; }
    .page-title { font-size: 1.25rem; }
    .top-bar { height: 60px; }
}