/**
 * Dashboard Mobile Cards Fix
 * 
 * Explicit CSS to ensure mobile cards are hidden on desktop
 * and desktop table is hidden on mobile.
 * 
 * @package ZL\Theme
 */

/* ============================================
   DESKTOP TABLE - Hide on mobile
   ============================================ */

/* Hide desktop table on mobile/tablet (<1024px) */
@media (max-width: 1023px) {
	.dashboard-desktop-table,
	.dashboard-table-desktop,
	.hidden.lg\:block,
	table.data-table,
	table.table-elite,
	div.table-container.lg\:block {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}
}

/* ============================================
   MOBILE CARDS - Hide on desktop, show on mobile
   ============================================ */

/* Desktop (≥1024px): Hide mobile cards completely */
@media (min-width: 1024px) {
	.dashboard-mobile-cards,
	.lg\:hidden,
	[class*="lg:hidden"] {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}
}

/* Mobile/Tablet (<1024px): Show mobile cards, ensure they're visible */
@media (max-width: 1023px) {
	.dashboard-mobile-cards {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
	}
	
	/* Ensure card elements are visible */
	.dashboard-mobile-cards .asset-card {
		display: block !important;
		opacity: 1 !important;
	}
}

/* ============================================
   MOBILE BOTTOM NAV - Spacing compensation
   ============================================ */

/* Ensure content has proper padding for bottom nav */
@media (max-width: 1023px) {
	body.logged-in main.container {
		padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
	}
}