/**
 * Dashboard Responsive Design
 *
 * Media queries for responsive layout adjustments.
 *
 * @package AgenticWP
 */

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 1200px) {
	.agenticwp-stat-card {
		grid-column: span 4; /* 3 per row */
	}

	.agenticwp-level-card {
		grid-column: span 4;
	}
}

@media screen and (max-width: 960px) {
	.agenticwp-span-8 {
		grid-column: span 12;
	}
	.agenticwp-span-4 {
		grid-column: span 12;
	}
}

@media screen and (max-width: 782px) {
	.agenticwp-dashboard-bento {
		gap: 16px;
	}

	.agenticwp-stat-card {
		grid-column: span 6; /* 2 per row */
	}

	.agenticwp-level-card {
		grid-column: span 12;
	}
}

@media screen and (max-width: 480px) {
	.agenticwp-stat-card,
	.agenticwp-level-card {
		grid-column: span 12; /* 1 per row */
	}

	.agenticwp-dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
