/**
 * Dashboard Mobile Cards - Expandable Finance UX
 * Bloomberg-style progressive disclosure
 */

/* ============================================
   CARD CONTAINER
   ============================================ */
@media (max-width: 1023px) {
	.dashboard-mobile-cards {
		padding-bottom: 120px; /* Safe area for bottom nav */
	}
	
	.asset-card {
		background: linear-gradient(135deg, 
			rgba(17, 23, 37, 0.95) 0%, 
			rgba(26, 31, 46, 0.98) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		animation: cardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
	}

	/* Staggered animation for smooth cascade effect */
	.asset-card:nth-child(1) { animation-delay: 0.05s; }
	.asset-card:nth-child(2) { animation-delay: 0.1s; }
	.asset-card:nth-child(3) { animation-delay: 0.15s; }
	.asset-card:nth-child(4) { animation-delay: 0.2s; }
	.asset-card:nth-child(5) { animation-delay: 0.25s; }
	.asset-card:nth-child(n+6) { animation-delay: 0.3s; }

	@keyframes cardFadeIn {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* Subtle shine effect */
	.asset-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, 
			transparent 0%, 
			rgba(255, 255, 255, 0.03) 50%, 
			transparent 100%);
		transition: left 0.5s ease;
		pointer-events: none;
	}
	
	.asset-card:active {
		transform: scale(0.98);
	}
	
	.asset-card:active::before {
		left: 100%;
	}
	
	.asset-card.expanded {
		background: linear-gradient(135deg, 
			rgba(26, 31, 46, 1) 0%, 
			rgba(17, 23, 37, 1) 100%);
		border-color: var(--accent-primary);
		box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15),
		            0 4px 12px rgba(0, 0, 0, 0.3);
	}

	/* ============================================
	   CARD HEADER
	   ============================================ */
	.asset-card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 16px;
		gap: 12px;
		min-height: 60px; /* Touch target */
	}
	
	.asset-info-mobile {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
		min-width: 0; /* Allow text truncate */
	}
	
	/* Logo */
	.asset-logo-mobile {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--bg-primary);
		border: 2px solid var(--border-primary);
		overflow: hidden;
	}
	
	.asset-logo-mobile img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.asset-logo-mobile .initials {
		font-size: 16px;
		font-weight: 700;
		color: var(--accent-primary);
		text-transform: uppercase;
	}
	
	/* Asset Details */
	.asset-details-mobile {
		flex: 1;
		min-width: 0;
	}
	
	.asset-name-mobile {
		font-size: 16px;
		font-weight: 600;
		color: var(--text-primary);
		line-height: 1.3;
		margin-bottom: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.asset-symbol-mobile {
		font-size: 13px;
		color: var(--text-secondary);
		font-family: var(--font-mono);
		letter-spacing: 0.5px;
	}
	
	/* Signal Badge */
	.signal-badge-mobile {
		padding: 6px 12px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.5px;
		flex-shrink: 0;
		text-transform: uppercase;
	}
	
	.signal-badge-mobile.signal-long {
		background: rgba(16, 185, 129, 0.15);
		color: #10B981;
		border: 1px solid rgba(16, 185, 129, 0.3);
	}
	
	.signal-badge-mobile.signal-buy {
		background: rgba(59, 130, 246, 0.15);
		color: #3B82F6;
		border: 1px solid rgba(59, 130, 246, 0.3);
	}
	
	.signal-badge-mobile.signal-sell {
		background: rgba(239, 68, 68, 0.15);
		color: #EF4444;
		border: 1px solid rgba(239, 68, 68, 0.3);
	}
	
	.signal-badge-mobile.signal-out {
		background: rgba(107, 114, 128, 0.15);
		color: #9CA3AF;
		border: 1px solid rgba(107, 114, 128, 0.3);
	}

	/* ============================================
	   PRIMARY METRICS (Always Visible)
	   ============================================ */
	.asset-card-metrics {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-bottom: 12px;
	}
	
	.metric {
		background: var(--bg-primary);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		padding: 12px;
		min-height: 72px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transition: all 0.15s ease;
	}
	
	.metric:active {
		transform: scale(0.97);
		background: rgba(59, 130, 246, 0.05);
	}
	
	.metric-label-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		margin-bottom: 8px;
		min-height: 18px; /* Ensure consistent height */
	}

	.metric-label {
		font-size: 11px;
		font-weight: 600;
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		cursor: pointer;
		line-height: 1;
		display: flex;
		align-items: center;
	}

	.metric-help-btn {
		width: 16px;
		height: 16px;
		padding: 0;
		background: rgba(59, 130, 246, 0.08);
		border: 1px solid rgba(59, 130, 246, 0.15);
		border-radius: 50%;
		color: var(--accent-primary);
		cursor: pointer;
		transition: all 0.2s ease;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.8;
	}

	.metric-help-btn svg {
		width: 10px !important;
		height: 10px !important;
		display: block;
		stroke-width: 2.5;
	}

	.metric-help-btn:active {
		background: rgba(59, 130, 246, 0.15);
		border-color: var(--accent-primary);
		transform: scale(1.1);
		opacity: 1;
	}

	.metric-help-btn-inline {
		width: 18px;
		height: 18px;
		margin-left: 6px;
		background: rgba(59, 130, 246, 0.1);
		border: 1px solid rgba(59, 130, 246, 0.2);
	}

	.metric-help-btn-inline svg {
		width: 11px !important;
		height: 11px !important;
	}

	.signal-badge-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	
	.metric-value {
		font-size: 18px;
		font-weight: 700;
		font-family: var(--font-mono);
		color: var(--text-primary);
		line-height: 1.2;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 32px;
	}
	
	.metric-value.positive,
	.metric-value.gain {
		color: var(--gain) !important;
	}
	
	.metric-value.negative,
	.metric-value.loss {
		color: var(--loss) !important;
	}
	
	.metric-value.neutral {
		color: var(--text-secondary) !important;
	}

	/* Clock badge in metric-value - centered and compact */
	.metric-value .clock-phase-badge-mobile {
		margin: 0 auto;
	}

	/* ============================================
	   EXPANDED METRICS (Hidden by default)
	   ============================================ */
	.asset-card-expanded-metrics {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		            opacity 0.2s ease;
	}
	
	.asset-card.expanded .asset-card-expanded-metrics {
		max-height: 1000px; /* Large enough for content */
		opacity: 1;
		margin-bottom: 12px;
	}
	
	.expanded-metrics-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 12px;
		background: rgba(59, 130, 246, 0.03);
		border: 1px solid rgba(59, 130, 246, 0.1);
		border-radius: 8px;
	}
	
	.metric-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid var(--border-primary);
	}
	
	.metric-row:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.metric-row-label {
		font-size: 13px;
		color: var(--text-secondary);
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	
	.metric-row-value {
		font-size: 14px;
		font-weight: 600;
		font-family: var(--font-mono);
		color: var(--text-primary);
		text-align: right;
	}
	
	.metric-row-value.gain {
		color: var(--gain);
	}
	
	.metric-row-value.loss {
		color: var(--loss);
	}

	/* Clock Phase Badge (Bloomberg-style - from desktop) */
	.clock-phase-badge-mobile {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid;
		transition: all 0.2s ease;
	}

	.clock-icon-mobile {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.clock-phase-text {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.3px;
		font-family: var(--font-mono);
		line-height: 1;
	}

	/* Clock in primary metrics - compact and professional */
	.asset-card-metrics .clock-phase-badge-mobile {
		padding: 6px 12px;
		gap: 6px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.asset-card-metrics .clock-icon-mobile {
		width: 16px;
		height: 16px;
	}

	.asset-card-metrics .clock-phase-text {
		font-size: 14px;
		font-weight: 700;
	}

	/* Light mode clock badge */
	:root:not(.dark) .clock-phase-badge-mobile.clock-1,
	:root:not(.dark) .clock-phase-badge-mobile.clock-2,
	:root:not(.dark) .clock-phase-badge-mobile.clock-11,
	:root:not(.dark) .clock-phase-badge-mobile.clock-12 {
		background: rgba(239, 68, 68, 0.08);
		border-color: rgba(239, 68, 68, 0.25);
	}

	:root:not(.dark) .clock-phase-badge-mobile.clock-3,
	:root:not(.dark) .clock-phase-badge-mobile.clock-4,
	:root:not(.dark) .clock-phase-badge-mobile.clock-9,
	:root:not(.dark) .clock-phase-badge-mobile.clock-10 {
		background: rgba(245, 158, 11, 0.08);
		border-color: rgba(245, 158, 11, 0.25);
	}

	:root:not(.dark) .clock-phase-badge-mobile.clock-5,
	:root:not(.dark) .clock-phase-badge-mobile.clock-6,
	:root:not(.dark) .clock-phase-badge-mobile.clock-7,
	:root:not(.dark) .clock-phase-badge-mobile.clock-8 {
		background: rgba(16, 185, 129, 0.08);
		border-color: rgba(16, 185, 129, 0.25);
	}

	/* Clock Phases Color-coding (from desktop) */
	.clock-phase-badge-mobile.clock-1,
	.clock-phase-badge-mobile.clock-2,
	.clock-phase-badge-mobile.clock-11,
	.clock-phase-badge-mobile.clock-12 {
		background: rgba(239, 68, 68, 0.1);
		border-color: rgba(239, 68, 68, 0.3);
		color: var(--loss);
	}

	.clock-phase-badge-mobile.clock-3,
	.clock-phase-badge-mobile.clock-4,
	.clock-phase-badge-mobile.clock-9,
	.clock-phase-badge-mobile.clock-10 {
		background: rgba(245, 158, 11, 0.1);
		border-color: rgba(245, 158, 11, 0.3);
		color: var(--warning);
	}

	.clock-phase-badge-mobile.clock-5,
	.clock-phase-badge-mobile.clock-6,
	.clock-phase-badge-mobile.clock-7,
	.clock-phase-badge-mobile.clock-8 {
		background: var(--gain-subtle);
		border-color: rgba(16, 185, 129, 0.3);
		color: var(--gain);
	}

	/* Clock SVG Elements */
	.clock-bezel {
		stroke: currentColor;
		stroke-width: 1.5;
		fill: none;
		opacity: 0.3;
	}

	.clock-face {
		fill: currentColor;
		opacity: 0.05;
	}

	.clock-tick {
		stroke: currentColor;
		opacity: 0.4;
	}

	.clock-hand-hour {
		stroke: currentColor;
		stroke-width: 2.5;
		stroke-linecap: round;
		opacity: 0.9;
	}

	.clock-hand-minute {
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		opacity: 0.6;
	}

	.clock-center {
		fill: currentColor;
		opacity: 0.8;
	}

	/* ============================================
	   EXPAND BUTTON
	   ============================================ */
	.card-expand-button {
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: transparent;
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		color: var(--text-secondary);
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.15s ease;
		letter-spacing: 0.3px;
		text-transform: uppercase;
	}
	
	.card-expand-button:hover {
		background: rgba(59, 130, 246, 0.05);
		border-color: var(--accent-primary);
		color: var(--accent-primary);
	}
	
	.card-expand-button:active {
		transform: scale(0.98);
	}
	
	.card-expand-button svg {
		width: 16px;
		height: 16px;
		transition: transform 0.2s ease;
	}
	
	.asset-card.expanded .card-expand-button svg {
		transform: rotate(180deg);
	}
	
	.card-expand-button .expand-text {
		display: block;
	}
	
	.card-expand-button .collapse-text {
		display: none;
	}
	
	.asset-card.expanded .card-expand-button .expand-text {
		display: none;
	}
	
	.asset-card.expanded .card-expand-button .collapse-text {
		display: block;
	}

	/* ============================================
	   TOUCH TARGETS & ACCESSIBILITY
	   ============================================ */
	.metric,
	.card-expand-button,
	.asset-card-header {
		-webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
	}
	
	/* Safe area for devices with notch */
	@supports (padding: max(0px)) {
		.dashboard-mobile-cards {
			padding-bottom: max(120px, calc(80px + env(safe-area-inset-bottom)));
		}
	}
}

/* ============================================
   TABLET ADJUSTMENTS (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
	.asset-card-metrics {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	
	.metric {
		min-height: 80px;
	}
	
	.metric-value {
		font-size: 20px;
	}
	
	.expanded-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ============================================
   TOOLTIP MODAL (Mobile Education UX)
   ============================================ */
@media (max-width: 1023px) {
	.mobile-tooltip-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.75);
		backdrop-filter: blur(4px);
		z-index: 10000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	.mobile-tooltip-modal-content {
		background: linear-gradient(135deg, 
			rgba(26, 31, 46, 0.98) 0%, 
			rgba(17, 23, 37, 0.95) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 16px;
		padding: 24px;
		max-width: 400px;
		width: 100%;
		position: relative;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
		            0 0 0 1px rgba(59, 130, 246, 0.1);
	}

	.mobile-tooltip-close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(59, 130, 246, 0.1);
		border: 1px solid rgba(59, 130, 246, 0.2);
		border-radius: 8px;
		color: var(--text-secondary);
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.mobile-tooltip-close svg {
		width: 18px !important;
		height: 18px !important;
	}

	.mobile-tooltip-close:active {
		background: rgba(59, 130, 246, 0.2);
		transform: scale(0.95);
	}

	.mobile-tooltip-icon {
		width: 56px;
		height: 56px;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, 
			var(--accent-primary) 0%, 
			rgba(37, 99, 235, 0.9) 100%);
		border-radius: 50%;
		box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
	}

	.mobile-tooltip-icon svg {
		width: 32px !important;
		height: 32px !important;
		color: white;
	}

	.mobile-tooltip-title {
		font-size: 20px;
		font-weight: 700;
		color: var(--text-primary);
		text-align: center;
		margin-bottom: 12px;
		line-height: 1.3;
	}

	.mobile-tooltip-description {
		font-size: 15px;
		font-weight: 400;
		color: var(--text-secondary);
		text-align: left;
		line-height: 1.6;
		margin-bottom: 16px;
	}

	.mobile-tooltip-formula {
		font-family: 'JetBrains Mono', var(--font-mono), monospace;
		font-size: 13px;
		color: var(--accent-primary);
		background: rgba(59, 130, 246, 0.08);
		border-left: 3px solid var(--accent-primary);
		padding: 10px 12px;
		border-radius: 6px;
		margin-bottom: 12px;
		text-align: left;
		line-height: 1.5;
		overflow-x: auto;
	}

	.mobile-tooltip-example {
		font-size: 13px;
		color: var(--text-tertiary);
		font-style: italic;
		text-align: left;
		line-height: 1.5;
		margin-bottom: 20px;
		padding-left: 12px;
		border-left: 2px solid var(--border-primary);
	}

	.mobile-tooltip-btn {
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, 
			var(--accent-primary) 0%, 
			rgba(37, 99, 235, 0.9) 100%);
		border: none;
		border-radius: 10px;
		color: white;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

	.mobile-tooltip-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	}
}

/* ============================================
   LIGHT MODE OVERRIDES (Mobile Cards)
   ============================================ */
@media (max-width: 1023px) {
	:root:not(.dark) .asset-card {
		background: linear-gradient(135deg, 
			rgba(249, 250, 251, 0.95) 0%, 
			rgba(243, 244, 246, 0.98) 100%);
		border: 1px solid rgba(229, 231, 235, 0.8);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	:root:not(.dark) .asset-card.expanded {
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 1) 0%, 
			rgba(249, 250, 251, 1) 100%);
		border-color: var(--accent-primary);
		box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12),
		            0 4px 12px rgba(0, 0, 0, 0.08);
	}

	:root:not(.dark) .metric {
		background: rgba(255, 255, 255, 0.8);
		border: 1px solid rgba(229, 231, 235, 0.6);
	}

	:root:not(.dark) .metric:active {
		background: rgba(59, 130, 246, 0.03);
	}

	:root:not(.dark) .expanded-metrics-grid {
		background: rgba(59, 130, 246, 0.02);
		border: 1px solid rgba(59, 130, 246, 0.08);
	}

	:root:not(.dark) .metric-row {
		border-bottom: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .card-expand-button {
		border: 1px solid rgba(229, 231, 235, 0.8);
		background: rgba(249, 250, 251, 0.5);
	}

	:root:not(.dark) .card-expand-button:hover {
		background: rgba(59, 130, 246, 0.04);
	}

	:root:not(.dark) .mobile-tooltip-modal {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(8px);
	}

	:root:not(.dark) .mobile-tooltip-modal-content {
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.98) 0%, 
			rgba(249, 250, 251, 0.95) 100%);
		border: 1px solid rgba(229, 231, 235, 0.8);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
		            0 0 0 1px rgba(59, 130, 246, 0.08);
	}

	:root:not(.dark) .mobile-tooltip-close {
		background: rgba(59, 130, 246, 0.08);
		border: 1px solid rgba(59, 130, 246, 0.15);
	}

	:root:not(.dark) .mobile-tooltip-close:active {
		background: rgba(59, 130, 246, 0.15);
	}

	:root:not(.dark) .metric-help-btn {
		background: rgba(59, 130, 246, 0.06);
		border: 1px solid rgba(59, 130, 246, 0.12);
	}

	:root:not(.dark) .metric-help-btn:active {
		background: rgba(59, 130, 246, 0.12);
	}

	:root:not(.dark) .metric-help-btn-inline {
		background: rgba(59, 130, 246, 0.08);
		border: 1px solid rgba(59, 130, 246, 0.15);
	}

	:root:not(.dark) .metric-value.positive {
		color: #059669 !important; /* Darker green for light mode readability */
	}

	:root:not(.dark) .metric-value.negative {
		color: #DC2626 !important; /* Darker red for light mode readability */
	}

	:root:not(.dark) .metric-row-value.gain {
		color: #059669 !important;
	}

	:root:not(.dark) .metric-row-value.loss {
		color: #DC2626 !important;
	}

	:root:not(.dark) .mobile-tooltip-formula {
		background: rgba(59, 130, 246, 0.06);
		border-left: 3px solid var(--accent-primary);
	}

	:root:not(.dark) .mobile-tooltip-example {
		border-left: 2px solid rgba(229, 231, 235, 0.8);
		color: var(--text-tertiary);
	}
}

/* ============================================
   DESKTOP: Hide mobile cards completely
   ============================================ */
@media (min-width: 1024px) {
	.dashboard-mobile-cards {
		display: none !important;
	}

	.mobile-tooltip-modal {
		display: none !important;
	}
}