/**
 * Header Holdings Badges - Compact Portfolio Activity Indicators
 * Bloomberg Terminal-style header badges for AIndex assets
 * Minimal, elegant, actionable
 */

/* ============================================
   HEADER HOLDINGS BADGES CONTAINER
   ============================================ */

.header-holdings-badges {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem; /* Compact spacing */
	margin-left: 0.75rem; /* Spacing after REAL-TIME badge */
}

/* ============================================
   INDIVIDUAL BADGE - Compact & Premium
   ============================================ */

.header-holdings-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem; /* Tight icon-count gap */
	padding: 0.25rem 0.5rem; /* 60% of section badge size */
	border-radius: 6px;
	font-size: 0.625rem; /* 10px - very compact */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer !important; /* Force pointer, override tooltip-trigger */
	position: relative;
	transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid transparent; /* Will be colored per badge type */
	background: transparent; /* Base, will be overridden */
	/* REMOVED animation to prevent stacking context issues with tooltip */
	/* animation: header-badge-pulse 3s ease-in-out infinite; */
	
	/* CRITICAL: Isolation for tooltip to escape stacking context */
	isolation: isolate;
}

.header-holdings-badge:hover {
	/* CRITICAL: NO transform/filter - they create stacking context that traps tooltip */
	/* Use box-shadow and scale via will-change instead */
	box-shadow: 0 0 0 1px currentColor;
	opacity: 0.9;
}

.header-holdings-badge:active {
	transform: translateY(0) scale(1);
}

/* Badge icon */
.header-holdings-badge .badge-icon {
	width: 0.875rem; /* 14px - compact */
	height: 0.875rem;
	opacity: 0.9;
}

/* Badge count */
.header-holdings-badge .badge-count {
	font-size: 0.6875rem; /* 11px */
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle depth */
}

/* ============================================
   BADGE TYPES - Active / Inflows / Outflows
   ============================================ */

/* Active Holdings Badge - Blue (always visible for AIndex) */
.header-holdings-badge.badge-active {
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.15) 0%, 
		rgba(37, 99, 235, 0.12) 100%);
	border-color: rgba(59, 130, 246, 0.3);
	color: #60a5fa;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.header-holdings-badge.badge-active:hover {
	box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
}

/* Active badge with activity - Enhanced glow */
.header-holdings-badge.badge-active.badge-has-activity {
	border-color: rgba(59, 130, 246, 0.5);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.25),
		0 0 12px rgba(59, 130, 246, 0.15);
}

/* INFLOWS Badge - Green (only when > 0) */
.header-holdings-badge.badge-inflows {
	background: linear-gradient(135deg, 
		rgba(34, 197, 94, 0.2) 0%, 
		rgba(22, 163, 74, 0.15) 100%);
	border-color: rgba(34, 197, 94, 0.4);
	color: #4ade80;
	box-shadow: 
		0 2px 6px rgba(34, 197, 94, 0.2),
		0 0 10px rgba(34, 197, 94, 0.12);
	animation: header-badge-pulse-green 2.5s ease-in-out infinite;
	position: relative; /* For notification dot */
}

.header-holdings-badge.badge-inflows:hover {
	box-shadow: 
		0 3px 10px rgba(34, 197, 94, 0.3),
		0 0 16px rgba(34, 197, 94, 0.2);
}

/* Notification dot for INFLOWS */
.header-holdings-badge.badge-inflows::before {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 8px;
	height: 8px;
	background: #4ade80;
	border-radius: 50%;
	box-shadow: 0 0 6px #4ade80;
	animation: header-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* OUTFLOWS Badge - Red (only when > 0) */
.header-holdings-badge.badge-outflows {
	background: linear-gradient(135deg, 
		rgba(239, 68, 68, 0.2) 0%, 
		rgba(220, 38, 38, 0.15) 100%);
	border-color: rgba(239, 68, 68, 0.4);
	color: #f87171;
	box-shadow: 
		0 2px 6px rgba(239, 68, 68, 0.2),
		0 0 10px rgba(239, 68, 68, 0.12);
	animation: header-badge-pulse-red 2.5s ease-in-out infinite;
	position: relative; /* For notification dot */
}

.header-holdings-badge.badge-outflows:hover {
	box-shadow: 
		0 3px 10px rgba(239, 68, 68, 0.3),
		0 0 16px rgba(239, 68, 68, 0.2);
}

/* Notification dot for OUTFLOWS */
.header-holdings-badge.badge-outflows::before {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 8px;
	height: 8px;
	background: #f87171;
	border-radius: 50%;
	box-shadow: 0 0 6px #f87171;
	animation: header-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ============================================
   ARROW ANIMATIONS - Subtle directional pulse
   ============================================ */

.badge-arrow-in {
	animation: badge-arrow-pulse-in 2.5s ease-in-out infinite;
}

.badge-arrow-out {
	animation: badge-arrow-pulse-out 2.5s ease-in-out infinite;
}

@keyframes badge-arrow-pulse-in {
	0%, 100% { 
		opacity: 1; 
		transform: translateX(0); 
	}
	50% { 
		opacity: 0.8; 
		transform: translateX(2px); 
	}
}

@keyframes badge-arrow-pulse-out {
	0%, 100% { 
		opacity: 1; 
		transform: translateX(0); 
	}
	50% { 
		opacity: 0.8; 
		transform: translateX(-2px); 
	}
}

/* Notification dot ping animation */
@keyframes header-ping {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50%, 100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* ============================================
   PULSE ANIMATIONS - Slow, elegant
   ============================================ */

@keyframes header-badge-pulse {
	0%, 100% { 
		opacity: 1; 
		transform: scale(1); 
	}
	50% { 
		opacity: 0.95; 
		transform: scale(1.01); 
	}
}

@keyframes header-badge-pulse-green {
	0%, 100% { 
		opacity: 1; 
		box-shadow: 
			0 2px 6px rgba(34, 197, 94, 0.2),
			0 0 10px rgba(34, 197, 94, 0.12);
	}
	50% { 
		opacity: 0.95; 
		box-shadow: 
			0 2px 8px rgba(34, 197, 94, 0.25),
			0 0 14px rgba(34, 197, 94, 0.18);
	}
}

@keyframes header-badge-pulse-red {
	0%, 100% { 
		opacity: 1; 
		box-shadow: 
			0 2px 6px rgba(239, 68, 68, 0.2),
			0 0 10px rgba(239, 68, 68, 0.12);
	}
	50% { 
		opacity: 0.95; 
		box-shadow: 
			0 2px 8px rgba(239, 68, 68, 0.25),
			0 0 14px rgba(239, 68, 68, 0.18);
	}
}

/* ============================================
   LIGHT MODE - Ultra-Subtle (NON psico!)
   ============================================ */

/* Disable aggressive animations in light mode */
html:not(.dark) .header-holdings-badge {
	animation: none !important; /* NO pulse */
	font-weight: 600 !important; /* More subtle weight */
}

/* Active Badge - Light mode subtle */
html:not(.dark) .header-holdings-badge.badge-active {
	background: rgba(59, 130, 246, 0.06) !important;
	border-color: rgba(59, 130, 246, 0.2) !important;
	color: #2563eb !important; /* Blue-600 */
	box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1) !important;
}

html:not(.dark) .header-holdings-badge.badge-active:hover {
	background: rgba(59, 130, 246, 0.1) !important;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15) !important;
}

/* INFLOWS Badge - Light mode ultra-subtle */
html:not(.dark) .header-holdings-badge.badge-inflows {
	background: rgba(34, 197, 94, 0.06) !important;
	border-color: rgba(34, 197, 94, 0.25) !important;
	color: #059669 !important; /* Green-600 */
	box-shadow: 0 1px 3px rgba(34, 197, 94, 0.1) !important;
}

html:not(.dark) .header-holdings-badge.badge-inflows:hover {
	background: rgba(34, 197, 94, 0.1) !important;
	box-shadow: 0 2px 6px rgba(34, 197, 94, 0.15) !important;
}

/* OUTFLOWS Badge - Light mode ultra-subtle */
html:not(.dark) .header-holdings-badge.badge-outflows {
	background: rgba(239, 68, 68, 0.06) !important;
	border-color: rgba(239, 68, 68, 0.25) !important;
	color: #dc2626 !important; /* Red-600 */
	box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1) !important;
}

html:not(.dark) .header-holdings-badge.badge-outflows:hover {
	background: rgba(239, 68, 68, 0.1) !important;
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
}

/* Notification dots - More subtle in light mode */
html:not(.dark) .header-holdings-badge::before {
	opacity: 0.5 !important; /* Less aggressive */
}

html:not(.dark) .header-holdings-badge.badge-inflows::before {
	background: #059669 !important;
	box-shadow: 0 0 4px rgba(5, 150, 105, 0.3) !important;
}

html:not(.dark) .header-holdings-badge.badge-outflows::before {
	background: #dc2626 !important;
	box-shadow: 0 0 4px rgba(220, 38, 38, 0.3) !important;
}

/* Disable arrow animations in light mode */
html:not(.dark) .header-holdings-badge .holdings-arrow-in,
html:not(.dark) .header-holdings-badge .holdings-arrow-out {
	animation: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.header-holdings-badges {
		margin-left: 0.5rem;
		gap: 0.25rem;
	}
	
	.header-holdings-badge {
		padding: 0.1875rem 0.375rem;
		font-size: 0.5625rem; /* 9px - even more compact on mobile */
	}
	
	.header-holdings-badge .badge-icon {
		width: 0.75rem; /* 12px */
		height: 0.75rem;
	}
	
	.header-holdings-badge .badge-count {
		font-size: 0.625rem; /* 10px */
	}
}

/* ============================================
   TOOLTIP PORTAL - Exactly like ring gauges (moved to body)
   ============================================ */

/* Portal tooltip (moved to body via JS) */
.header-badge-tooltip-portal {
	position: fixed;
	background: rgba(15, 20, 30, 0.98);
	border: 1px solid rgba(75, 85, 99, 0.8);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	min-width: 200px;
	max-width: 280px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms ease;
	z-index: 2147483647; /* Max z-index */
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	text-align: left;
	transform: translateX(-50%);
}

.header-badge-tooltip-portal.visible {
	opacity: 1;
	visibility: visible;
}

.header-badge-tooltip-portal .tooltip-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: #f9fafb;
	margin-bottom: 0.25rem;
}

.header-badge-tooltip-portal .tooltip-description {
	font-size: 0.75rem;
	color: #9ca3af;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.header-badge-tooltip-portal .tooltip-formula {
	font-size: 0.6875rem;
	color: #6b7280;
	font-family: var(--font-mono, monospace);
}

/* ============================================
   TOOLTIP OVERRIDE - Fallback (if JS fails)
   ============================================ */

/* CRITICAL: Force ring gauge style on ALL header badge tooltips (tooltip and tooltip-tab) */
/* Ultra-specific selectors to override holdings-compact.css rules */
.header-holdings-badge.badge-active .tooltip,
.header-holdings-badge.badge-active .tooltip-tab,
.header-holdings-badge.badge-inflows .tooltip,
.header-holdings-badge.badge-inflows .tooltip-tab,
.header-holdings-badge.badge-outflows .tooltip,
.header-holdings-badge.badge-outflows .tooltip-tab,
.header-holdings-badge .tooltip,
.header-holdings-badge .tooltip-tab {
	/* CRITICAL: Open downward instead of upward */
	bottom: auto !important;
	top: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	
	/* CRITICAL: EXACT SAME STYLE AS RING GAUGES - Bloomberg-grade */
	min-width: 200px !important;
	max-width: 280px !important;
	padding: 0.75rem 1rem !important; /* Ring gauge padding */
	border-radius: 8px !important; /* Ring gauge border-radius */
	font-size: 0.75rem !important;
	text-align: left !important;
	
	/* Background & Glassmorphism - EXACT match to ring-tooltip-portal */
	background: rgba(15, 20, 30, 0.98) !important;
	border: 1px solid rgba(75, 85, 99, 0.8) !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
	
	/* No backdrop-filter (ring tooltips don't use it) */
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	
	/* CRITICAL: Ultra-high z-index to escape ANY stacking context */
	z-index: 2147483647 !important; /* Max 32-bit integer - same as ring tooltips */
	position: absolute !important;
	
	/* Force paint on own layer */
	will-change: opacity, transform !important;
}

/* Show tooltip on hover - downward motion (for both .tooltip and .tooltip-tab) */
/* Ultra-specific selectors to override holdings-compact.css rules */
.header-holdings-badge.badge-active:hover .tooltip,
.header-holdings-badge.badge-active:hover .tooltip-tab,
.header-holdings-badge.badge-inflows:hover .tooltip,
.header-holdings-badge.badge-inflows:hover .tooltip-tab,
.header-holdings-badge.badge-outflows:hover .tooltip,
.header-holdings-badge.badge-outflows:hover .tooltip-tab,
.header-holdings-badge:hover .tooltip,
.header-holdings-badge:hover .tooltip-tab {
	opacity: 1 !important;
	transform: translateX(-50%) !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* Arrow pointing UP (tooltip below badge) - Match ring gauge background - For BOTH classes */
/* Ultra-specific selectors to override holdings-compact.css rules */
.header-holdings-badge.badge-active .tooltip::after,
.header-holdings-badge.badge-active .tooltip-tab::after,
.header-holdings-badge.badge-inflows .tooltip::after,
.header-holdings-badge.badge-inflows .tooltip-tab::after,
.header-holdings-badge.badge-outflows .tooltip::after,
.header-holdings-badge.badge-outflows .tooltip-tab::after,
.header-holdings-badge .tooltip::after,
.header-holdings-badge .tooltip-tab::after {
	content: '';
	position: absolute;
	bottom: 100% !important; /* Above tooltip */
	top: auto !important;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-bottom-color: rgba(15, 20, 30, 0.98) !important; /* Match ring gauge background */
	border-top-color: transparent !important;
	filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3));
}

.header-holdings-badge.badge-active .tooltip::before,
.header-holdings-badge.badge-active .tooltip-tab::before,
.header-holdings-badge.badge-inflows .tooltip::before,
.header-holdings-badge.badge-inflows .tooltip-tab::before,
.header-holdings-badge.badge-outflows .tooltip::before,
.header-holdings-badge.badge-outflows .tooltip-tab::before,
.header-holdings-badge .tooltip::before,
.header-holdings-badge .tooltip-tab::before {
	content: '';
	position: absolute;
	bottom: 100% !important; /* Above tooltip */
	top: auto !important;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-bottom-color: rgba(75, 85, 99, 0.8) !important; /* Match ring gauge border opacity */
	border-top-color: transparent !important;
	margin-bottom: 1px;
}

.header-holdings-badge .tooltip-title {
	font-size: 0.75rem;
}

.header-holdings-badge .tooltip-description {
	font-size: 0.6875rem;
}

.header-holdings-badge .tooltip-formula {
	font-size: 0.625rem;
	margin-top: 0.375rem;
	padding: 0.1875rem 0.375rem;
}

/* Ensure parent containers allow tooltip overflow and don't create stacking contexts */
.asset-header-badges {
	overflow: visible !important;
	position: relative;
	/* CRITICAL: No transform, filter, or other stacking-context-creating properties */
}

.header-holdings-badges {
	position: relative;
	overflow: visible !important;
	/* CRITICAL: No transform, filter, or other stacking-context-creating properties */
}

.header-holdings-badge {
	position: relative;
	overflow: visible !important;
	/* CRITICAL: isolation: isolate creates a new stacking context for children but allows tooltip to escape */
}