/**
 * Dashboard Mobile Header - Bloomberg Minimal
 * Compact header for mobile, maximize content visibility
 */

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 1023px) {
	/* Make "How it works" collapsed by default on mobile */
	.explain-panel {
		margin-bottom: 16px; /* Reduce spacing */
	}
	
	.explain-trigger {
		height: 48px; /* Slightly smaller */
	}

	/* Hide desktop filter bar on mobile (we have FAB + bottom sheet) */
	.elite-filter-bar {
		display: none !important;
	}

	/* Compact dashboard header */
	.dashboard-header {
		margin-bottom: 16px !important; /* Reduce spacing */
	}
	
	.dashboard-title {
		font-size: 28px !important; /* Smaller on mobile */
		margin-bottom: 4px;
	}
	
	.dashboard-subtitle {
		font-size: 14px !important;
		line-height: 1.4;
	}

	/* Trial banner more compact */
	.trial-banner {
		padding: 12px 16px !important;
		margin-bottom: 16px !important;
	}

	/* Add bottom padding to main content for floating FAB */
	main.container {
		padding-bottom: 140px !important; /* FAB (56px) + bottom nav (64px) + spacing */
	}
}

/* ============================================
   TABLET ADJUSTMENTS (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
	.dashboard-title {
		font-size: 32px !important;
	}
	
	.dashboard-subtitle {
		font-size: 15px !important;
	}
}

/* ============================================
   DESKTOP: Normal layout
   ============================================ */
@media (min-width: 1024px) {
	/* Desktop keeps everything as-is */
	.dashboard-mobile-filter-button {
		display: none !important;
	}
}