fix(haproxy): Improve responsive design for mobile devices

- Emergency banner stacks vertically on mobile
- Quick actions use CSS grid (3-col → 2-col)
- Tables get horizontal scroll on narrow screens
- Health grid adapts to 3-col → 2-col on mobile
- Stats grid compact layout on small screens
- Reduced padding and font sizes for mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package/secubox/luci-app-haproxy/htdocs/luci-static/resources/haproxy/dashboard.css

@@ -1059,16 +1059,53 @@ code,
 	.hp-row {
 		flex-direction: column;
 	}
+
+	.hp-row > * {
+		flex: none !important;
+	}
+
+	.hp-emergency-banner {
+		flex-direction: column !important;
+		text-align: center;
+		gap: 16px !important;
+	}
+
+	.hp-emergency-banner > div:first-child {
+		flex-direction: column !important;
+	}
+
+	.hp-emergency-banner > div:last-child {
+		width: 100%;
+		justify-content: center !important;
+	}
 }
 
 @media (max-width: 768px) {
 	.hp-page-header {
 		flex-direction: column;
 		align-items: flex-start;
+		padding: 16px;
+	}
+
+	.hp-page-title {
+		font-size: 20px;
 	}
 
 	.hp-stats-grid {
 		grid-template-columns: repeat(2, 1fr);
+		gap: 12px;
+	}
+
+	.hp-stat-card {
+		padding: 16px;
+	}
+
+	.hp-stat-icon {
+		font-size: 24px;
+	}
+
+	.hp-stat-value {
+		font-size: 28px;
 	}
 
 	.hp-backends-grid {
@@ -1077,25 +1114,104 @@ code,
 
 	.hp-quick-actions {
 		justify-content: center;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
 	}
 
 	.hp-action-btn {
 		flex: 1;
 		min-width: auto;
+		padding: 12px 8px;
+	}
+
+	.hp-action-icon {
+		font-size: 22px;
+	}
+
+	.hp-action-label {
+		font-size: 11px;
+	}
+
+	.hp-table {
+		display: block;
+		overflow-x: auto;
+		white-space: nowrap;
+	}
+
+	.hp-health-grid {
+		grid-template-columns: repeat(3, 1fr);
+		gap: 8px;
+	}
+
+	.hp-health-item {
+		padding: 12px 8px;
+	}
+
+	.hp-health-icon {
+		font-size: 20px;
+	}
+
+	.hp-health-label {
+		font-size: 12px;
+	}
+
+	.hp-card-header {
+		padding: 12px 16px;
+	}
+
+	.hp-card-body {
+		padding: 16px;
 	}
 }
 
 @media (max-width: 480px) {
 	.hp-stats-grid {
-		grid-template-columns: 1fr;
+		grid-template-columns: 1fr 1fr;
+		gap: 8px;
+	}
+
+	.hp-stat-card {
+		padding: 12px;
 	}
 
 	.hp-stat-value {
-		font-size: 28px;
+		font-size: 24px;
+	}
+
+	.hp-stat-label {
+		font-size: 11px;
 	}
 
 	.hp-btn {
 		width: 100%;
 		justify-content: center;
 	}
+
+	.hp-quick-actions {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.hp-health-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.hp-connection-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.hp-header-badges {
+		width: 100%;
+	}
+
+	.hp-header-badge {
+		flex: 1;
+		justify-content: center;
+	}
+
+	.hp-emergency-banner > div:nth-child(2) {
+		display: grid !important;
+		grid-template-columns: repeat(3, 1fr) !important;
+		width: 100%;
+	}
 }