/**
 * Holdings Compact - Dashboard-style uniform design
 * Matches Trade History and other sections styling
 */

/* ============================================
   HOLDINGS COMPACT SECTION
   ============================================ */

.holdings-compact-section {
	margin: 2rem 0;
}

.holdings-compact-container {
	background: var(--bg-secondary, #1f2937);
	border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.06));
	border-radius: 12px;
	overflow: hidden;
}

/* Light mode */
[data-theme="light"] .holdings-compact-container,
.light-mode .holdings-compact-container {
	background: var(--bg-primary, #ffffff);
	border-color: var(--border-primary, rgba(0, 0, 0, 0.08));
}

/* ============================================
   HEADER - Same as Trade History
   ============================================ */

.holdings-compact-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.06));
	background: var(--bg-elevated, rgba(255, 255, 255, 0.02));
}

[data-theme="light"] .holdings-compact-header,
.light-mode .holdings-compact-header {
	background: var(--bg-secondary, #f9fafb);
	border-bottom-color: var(--border-primary, rgba(0, 0, 0, 0.08));
}

.holdings-compact-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary, #f1f5f9);
	position: relative; /* For activity badge positioning */
}

[data-theme="light"] .holdings-compact-title,
.light-mode .holdings-compact-title {
	color: var(--text-primary, #1e293b);
}

.holdings-compact-title svg {
	color: var(--accent-primary, #3b82f6);
}

/* ============================================
   ACTIVITY BADGES (Section Header Alerts)
   ============================================ */

.holdings-activity-badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.holdings-activity-badge {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 8px;
	font-size: 0.75rem;
	font-weight: 700; /* Bold for dark mode (ok) */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer !important; /* Clickable! Force override tooltip-trigger cursor */
	position: relative;
	animation: activity-pulse 2s ease-in-out infinite; /* OK for dark mode */
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	border: none; /* Remove default button border */
	background: transparent; /* Will be overridden by specific classes */
}

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

/* CRITICAL: Override tooltip-trigger cursor */
.holdings-activity-badge.tooltip-trigger {
	cursor: pointer !important; /* NO "?" cursor, just pointer */
}

.holdings-activity-badge:hover {
	transform: scale(1.08);
	filter: brightness(1.15);
}

.holdings-activity-badge:active {
	transform: scale(1.02);
}

.holdings-activity-badge .activity-icon {
	width: 1rem;
	height: 1rem;
}

/* Arrow animations for badges (reuse from tabs) */
.holdings-activity-badge .holdings-arrow-in {
	animation: pulse-in 2s ease-in-out infinite;
}

.holdings-activity-badge .holdings-arrow-out {
	animation: pulse-out 2s ease-in-out infinite;
}

.holdings-activity-badge .activity-count {
	font-size: 0.875rem;
	font-weight: 800;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* INFLOWS Badge - Green (Dark mode: original intensity) */
.holdings-activity-badge.activity-inflows {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.25) 100%);
	border: 2px solid rgba(34, 197, 94, 0.6);
	color: #4ade80;
	box-shadow: 
		0 4px 12px rgba(34, 197, 94, 0.35),
		0 0 24px rgba(34, 197, 94, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.holdings-activity-badge.activity-inflows:hover {
	box-shadow: 
		0 6px 16px rgba(34, 197, 94, 0.45),
		0 0 32px rgba(34, 197, 94, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* OUTFLOWS Badge - Red (Dark mode: original intensity) */
.holdings-activity-badge.activity-outflows {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.25) 100%);
	border: 2px solid rgba(239, 68, 68, 0.6);
	color: #f87171;
	box-shadow: 
		0 4px 12px rgba(239, 68, 68, 0.35),
		0 0 24px rgba(239, 68, 68, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.holdings-activity-badge.activity-outflows:hover {
	box-shadow: 
		0 6px 16px rgba(239, 68, 68, 0.45),
		0 0 32px rgba(239, 68, 68, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Ping effect (animated dot) */
.holdings-activity-badge::before {
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	animation: activity-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.holdings-activity-badge.activity-inflows::before {
	background: #4ade80;
	box-shadow: 0 0 8px #4ade80;
}

.holdings-activity-badge.activity-outflows::before {
	background: #f87171;
	box-shadow: 0 0 8px #f87171;
}

/* Animations */
@keyframes activity-pulse {
	0%, 100% { 
		opacity: 1;
		transform: scale(1);
	}
	50% { 
		opacity: 0.9;
		transform: scale(1.02);
	}
}

@keyframes activity-ping {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50%, 100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* Light mode adjustments - Bloomberg subtle (NON psico!) */
html:not(.dark) .holdings-activity-badge.activity-inflows {
	background: rgba(34, 197, 94, 0.08) !important; /* Ultra-subtle */
	border: 1px solid rgba(34, 197, 94, 0.3) !important;
	color: #059669 !important; /* Green-600 (darker) */
	box-shadow: 0 1px 3px rgba(34, 197, 94, 0.12) !important; /* Minimal glow */
}

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

html:not(.dark) .holdings-activity-badge.activity-outflows {
	background: rgba(239, 68, 68, 0.08) !important; /* Ultra-subtle */
	border: 1px solid rgba(239, 68, 68, 0.3) !important;
	color: #dc2626 !important; /* Red-600 (darker) */
	box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12) !important; /* Minimal glow */
}

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

/* Ping dot in light mode - more subtle */
html:not(.dark) .holdings-activity-badge::before {
	opacity: 0.6 !important; /* Less aggressive */
}

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

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

/* ============================================
   TABS - Pill Switcher (Bloomberg-style, consistent with Performance tabs)
   ============================================ */

.holdings-compact-tabs {
	display: inline-flex;
	background: var(--bg-secondary, rgba(31, 41, 55, 0.6));
	backdrop-filter: blur(12px);
	padding: 4px;
	border-radius: 10px;
	border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
	gap: 4px;
}

[data-theme="light"] .holdings-compact-tabs,
.light-mode .holdings-compact-tabs {
	background: var(--bg-secondary, #f1f5f9);
	border-color: var(--border-primary, rgba(0, 0, 0, 0.08));
}

.holdings-compact-tabs button {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 8px 16px;
	background: transparent;
	border: none; /* NO border on individual tabs */
	border-radius: 7px;
	color: var(--text-secondary, #94a3b8);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	cursor: pointer;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	white-space: nowrap;
}

.holdings-compact-tabs button:hover:not(.tab-disabled) {
	color: var(--text-primary, #f1f5f9);
	background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .holdings-compact-tabs button:hover:not(.tab-disabled),
.light-mode .holdings-compact-tabs button:hover:not(.tab-disabled) {
	background: rgba(0, 0, 0, 0.04);
}

/* Disabled tab state (when count = 0) */
.holdings-compact-tabs button.tab-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: transparent;
}

.holdings-compact-tabs button.tab-disabled:hover {
	background: transparent;
	transform: none;
	box-shadow: none;
	/* IMPORTANT: Tooltip should still appear with full opacity/background */
}

/* Ensure tooltip on disabled tab is fully visible */
.holdings-compact-tabs button.tab-disabled .tooltip-tab {
	opacity: 0; /* Hidden by default */
}

.holdings-compact-tabs button.tab-disabled:hover .tooltip-tab {
	opacity: 1 !important; /* Full opacity on hover */
	background: rgba(31, 41, 55, 0.95) !important; /* Force glassmorphism */
}

.holdings-compact-tabs button.tab-disabled .holdings-arrow-in,
.holdings-compact-tabs button.tab-disabled .holdings-arrow-out {
	animation: none;
}

.holdings-compact-tabs button.tab-disabled .tab-badge-notify::before {
	display: none;
}

/* Active tab - Holdings (default) - Elevated pill */
.holdings-compact-tabs button.active.tab-holdings {
	background: var(--bg-elevated, rgba(255, 255, 255, 0.08));
	color: var(--text-primary, #f1f5f9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
	            0 0 0 1px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .holdings-compact-tabs button.active.tab-holdings,
.light-mode .holdings-compact-tabs button.active.tab-holdings {
	background: var(--accent-primary, #3b82f6);
	color: white;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Active tab - INFLOWS (green accent) */
.holdings-compact-tabs button.active.tab-in {
	background: var(--bg-elevated, rgba(255, 255, 255, 0.08));
	color: #4ade80;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
	            0 0 0 1px rgba(34, 197, 94, 0.3),
	            0 0 20px rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .holdings-compact-tabs button.active.tab-in,
.light-mode .holdings-compact-tabs button.active.tab-in {
	background: rgba(34, 197, 94, 0.12);
	color: #16a34a;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.holdings-compact-tabs button.tab-in .holdings-arrow-in {
	animation: pulse-in 2s ease-in-out infinite;
}

@keyframes pulse-in {
	0%, 100% { opacity: 1; transform: translateX(0); }
	50% { opacity: 0.7; transform: translateX(3px); }
}

/* Active tab - OUTFLOWS (red accent) */
.holdings-compact-tabs button.active.tab-out {
	background: var(--bg-elevated, rgba(255, 255, 255, 0.08));
	color: #f87171;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
	            0 0 0 1px rgba(239, 68, 68, 0.3),
	            0 0 20px rgba(239, 68, 68, 0.15);
}

[data-theme="light"] .holdings-compact-tabs button.active.tab-out,
.light-mode .holdings-compact-tabs button.active.tab-out {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Arrow animations for IN/OUT tabs */
.holdings-compact-tabs button.tab-in .holdings-arrow-in {
	animation: pulse-in 2s ease-in-out infinite;
}

@keyframes pulse-in {
	0%, 100% { opacity: 1; transform: translateX(0); }
	50% { opacity: 0.7; transform: translateX(3px); }
}

.holdings-compact-tabs button.tab-out .holdings-arrow-out {
	animation: pulse-out 2s ease-in-out infinite;
}

@keyframes pulse-out {
	0%, 100% { opacity: 1; transform: translateX(0); }
	50% { opacity: 0.7; transform: translateX(-3px); }
}

/* Tab tooltips - Special positioning + Force glassmorphism background */
.holdings-compact-tabs button .tooltip-tab {
	bottom: auto;
	top: calc(100% + 8px);
	transform: translateX(-50%) translateY(0);
	/* CRITICAL: Force glassmorphism background (same as base tooltip) */
	background: rgba(31, 41, 55, 0.95) !important;
	backdrop-filter: blur(12px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(150%) !important;
	border: 1px solid rgba(75, 85, 99, 0.6) !important;
	box-shadow: 
		0 20px 25px -5px rgba(0, 0, 0, 0.5),
		0 10px 10px -5px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1),
		0 0 50px rgba(59, 130, 246, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Show tooltip on hover (including disabled tabs) */
.holdings-compact-tabs button:hover .tooltip-tab,
.holdings-compact-tabs button.tab-disabled:hover .tooltip-tab {
	opacity: 1;
	transform: translateX(-50%) translateY(4px);
	pointer-events: auto;
}

/* Light mode tooltips */
[data-theme="light"] .holdings-compact-tabs button .tooltip-tab,
.light-mode .holdings-compact-tabs button .tooltip-tab {
	background: rgba(255, 255, 255, 0.98) !important;
	border-color: rgba(0, 0, 0, 0.12) !important;
	box-shadow: 
		0 20px 25px -5px rgba(0, 0, 0, 0.15),
		0 10px 10px -5px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(0, 0, 0, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Tab badges - Subtle, integrated */
.tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--text-tertiary, #64748b);
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .tab-badge,
.light-mode .tab-badge {
	background: rgba(0, 0, 0, 0.06);
	color: var(--text-tertiary, #64748b);
}

/* Badge colors for active tabs - More visible */
.holdings-compact-tabs button.active .tab-badge-holdings {
	background: rgba(59, 130, 246, 0.25);
	color: #60a5fa;
}

[data-theme="light"] .holdings-compact-tabs button.active .tab-badge-holdings,
.light-mode .holdings-compact-tabs button.active .tab-badge-holdings {
	background: rgba(255, 255, 255, 0.9);
	color: #3b82f6;
}

.holdings-compact-tabs button.active .tab-badge-in {
	background: rgba(34, 197, 94, 0.25);
	color: #4ade80;
}

[data-theme="light"] .holdings-compact-tabs button.active .tab-badge-in,
.light-mode .holdings-compact-tabs button.active .tab-badge-in {
	background: rgba(34, 197, 94, 0.15);
	color: #16a34a;
}

.holdings-compact-tabs button.active .tab-badge-out {
	background: rgba(239, 68, 68, 0.25);
	color: #f87171;
}

[data-theme="light"] .holdings-compact-tabs button.active .tab-badge-out,
.light-mode .holdings-compact-tabs button.active .tab-badge-out {
	background: rgba(239, 68, 68, 0.15);
	color: #dc2626;
}

/* Highlight badge for IN/OUT (when count > 0) */
.tab-badge-highlight {
	font-weight: 800;
	color: #ffffff !important; /* White text for readability */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Notification badge - SUBTLE for section (header does the alerting) */
.tab-badge-notify {
	position: relative;
	/* NO animation - header badges already alert user */
	/* Larger badge for better visibility */
	min-width: 1.5rem !important;
	height: 1.5rem;
	font-size: 0.8125rem !important;
	font-weight: 900 !important;
	/* Subtle glow - no pulsing */
	box-shadow: 0 0 8px currentColor, inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Static notification dot - no animation */
.tab-badge-notify::before {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 6px currentColor;
	/* NO animation - static indicator only */
}

/* No notification animations on disabled tabs */
.tab-disabled .tab-badge {
	animation: none;
}

.tab-disabled .tab-badge::before {
	display: none;
}

/* Animations removed - header badges do the alerting
   Section badges are informational only, not attention-grabbing */

.holdings-compact-tabs .tab-badge {
	background: rgba(255, 255, 255, 0.15);
	padding: 0.125rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	min-width: 1.5rem;
	text-align: center;
}

.holdings-compact-tabs button.active .tab-badge {
	background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   TABLE - Dashboard style
   ============================================ */

.holdings-compact-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-y: visible; /* Allow tooltips to escape vertically */
	position: relative;
	z-index: 1; /* Base stacking context */
}

.holdings-compact-container {
	overflow: visible !important; /* Allow tooltips to escape section */
	position: relative;
	z-index: 2; /* Higher than wrapper */
}

.holdings-compact-section {
	overflow: visible !important; /* Allow tooltips to escape section */
	position: relative;
	z-index: 1;
}

/* Tooltip z-index hierarchy */
.holdings-compact-tabs {
	position: relative;
	z-index: 100; /* High enough for tab tooltips */
}

.holdings-compact-tabs button {
	position: relative;
	z-index: 101;
}

.holdings-compact-tabs button .tooltip-tab {
	z-index: 999999 !important; /* Above everything */
}

.holdings-compact-table thead th .tooltip {
	z-index: 999999 !important; /* Above everything */
}

.holdings-compact-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	table-layout: fixed; /* Fixed layout for consistent column widths */
}

/* Column widths - Bloomberg-grade proportions */
.holdings-compact-table th:nth-child(1),
.holdings-compact-table td:nth-child(1) { width: 28%; } /* Instrument */

.holdings-compact-table th:nth-child(2),
.holdings-compact-table td:nth-child(2) { width: 10%; text-align: center; } /* Weight */

.holdings-compact-table th:nth-child(3),
.holdings-compact-table td:nth-child(3) { width: 13%; text-align: right; } /* Last */

.holdings-compact-table th:nth-child(4),
.holdings-compact-table td:nth-child(4) { width: 13%; text-align: right; } /* Entry */

.holdings-compact-table th:nth-child(5),
.holdings-compact-table td:nth-child(5) { width: 13%; text-align: right; } /* Stop */

.holdings-compact-table th:nth-child(6),
.holdings-compact-table td:nth-child(6) { width: 13%; text-align: right; } /* P&L */

.holdings-compact-table th:nth-child(7),
.holdings-compact-table td:nth-child(7) { width: 10%; text-align: center; } /* Clock */

.holdings-compact-table thead th {
	padding: 1rem 1.5rem;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-tertiary, #64748b);
	border-bottom: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.06));
	background: var(--bg-secondary, #1f2937);
	position: relative;
	overflow: visible !important; /* CRITICAL: Allow tooltips to escape */
}

/* Sortable columns - Dashboard-consistent style */
.holdings-compact-table thead th[data-sortable] {
	cursor: pointer;
	user-select: none;
	transition: var(--transition-base, all 0.2s);
	position: relative;
}

.holdings-compact-table thead th[data-sortable]:hover {
	background: rgba(59, 130, 246, 0.04);
	color: var(--accent-primary, #3b82f6);
}

/* Sort indicator - Dashboard-consistent (unicode character) */
.holdings-compact-table thead th[data-sortable]::after {
	content: '⇅';
	position: absolute;
	right: 0.5rem;
	opacity: 0;
	font-size: 0.75rem;
	transition: var(--transition-fast, opacity 0.15s);
	color: var(--text-tertiary, #94a3b8);
}

.holdings-compact-table thead th[data-sortable]:hover::after {
	opacity: 0.5;
}

/* Active sort indicators */
.holdings-compact-table thead th.sorted-asc::after {
	content: '↑';
	opacity: 1;
	color: var(--accent-primary, #3b82f6);
}

.holdings-compact-table thead th.sorted-desc::after {
	content: '↓';
	opacity: 1;
	color: var(--accent-primary, #3b82f6);
}

/* Right-aligned columns need more padding for sort icon */
.holdings-compact-table thead th.text-right[data-sortable] {
	padding-right: 2rem;
}

[data-theme="light"] .holdings-compact-table thead th,
.light-mode .holdings-compact-table thead th {
	background: var(--bg-secondary, #f9fafb);
	border-bottom-color: var(--border-primary, rgba(0, 0, 0, 0.08));
}

.holdings-compact-table tbody tr {
	border-bottom: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.04));
	transition: all 0.2s;
}

.holdings-compact-table tbody tr:hover {
	background: var(--bg-elevated, rgba(255, 255, 255, 0.02));
}

[data-theme="light"] .holdings-compact-table tbody tr:hover,
.light-mode .holdings-compact-table tbody tr:hover {
	background: var(--bg-secondary, #f9fafb);
}

.holdings-compact-table tbody td {
	padding: 1rem 1.5rem;
	color: var(--text-secondary, #cbd5e1);
	vertical-align: middle;
}

[data-theme="light"] .holdings-compact-table tbody td,
.light-mode .holdings-compact-table tbody td {
	color: var(--text-secondary, #64748b);
}

/* ============================================
   ASSET CELL - Dashboard style with initials
   ============================================ */

.holdings-compact-asset {
	min-width: 200px;
}

.holdings-asset-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
}

.holdings-asset-link:hover {
	color: var(--accent-primary, #3b82f6);
}

/* Asset logo - Dashboard style (SVG crypto icons) */
.holdings-asset-logo-wrapper {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.holdings-asset-logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.holdings-asset-logo-wrapper .asset-logo-initials {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--bg-elevated), var(--bg-tertiary));
	border: 2px solid var(--border-primary);
}

.holdings-asset-link:hover .holdings-asset-logo-wrapper {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
}

.holdings-asset-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.holdings-asset-name {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--text-primary, #f1f5f9);
	line-height: 1.2;
}

[data-theme="light"] .holdings-asset-name,
.light-mode .holdings-asset-name {
	color: var(--text-primary, #1e293b);
}

.holdings-asset-ticker {
	font-size: 0.75rem;
	color: var(--text-tertiary, #64748b);
	font-family: var(--font-mono, monospace);
	font-weight: 500;
	line-height: 1.2;
}

/* ============================================
   VALUE CELLS
   ============================================ */

.holdings-weight {
	font-weight: 600;
	color: var(--text-secondary, #cbd5e1);
	font-variant-numeric: tabular-nums;
}

.holdings-price {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	font-family: var(--font-mono, monospace);
	font-size: 0.8125rem;
}

.holdings-pnl {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-family: var(--font-mono, monospace);
	padding: 0.25rem 0.625rem;
	border-radius: 6px;
	display: inline-block;
	min-width: 4rem;
	text-align: center;
}

.pnl-positive {
	color: var(--success-color, #10b981);
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.pnl-negative {
	color: var(--error-color, #ef4444);
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.holdings-entry {
	color: var(--text-secondary, #94a3b8);
	font-size: 0.8125rem;
}

.holdings-stop {
	color: var(--error-color, #ef4444);
	font-weight: 600;
	font-size: 0.8125rem;
}

/* P&L extreme values - WOW effect */
.holdings-pnl.extreme-gain {
	text-shadow: 0 0 10px rgba(16, 185, 129, 0.7), 0 0 20px rgba(16, 185, 129, 0.4);
	font-weight: 800 !important;
	font-size: 0.9375rem;
	animation: pulse-glow-green 2s ease-in-out infinite;
}

.holdings-pnl.extreme-loss {
	text-shadow: 0 0 10px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.4);
	font-weight: 800 !important;
	font-size: 0.9375rem;
	animation: pulse-glow-red 2s ease-in-out infinite;
}

@keyframes pulse-glow-green {
	0%, 100% { 
		text-shadow: 0 0 10px rgba(16, 185, 129, 0.7), 0 0 20px rgba(16, 185, 129, 0.4);
	}
	50% { 
		text-shadow: 0 0 15px rgba(16, 185, 129, 0.9), 0 0 30px rgba(16, 185, 129, 0.6);
	}
}

@keyframes pulse-glow-red {
	0%, 100% { 
		text-shadow: 0 0 10px rgba(239, 68, 68, 0.7), 0 0 20px rgba(239, 68, 68, 0.4);
	}
	50% { 
		text-shadow: 0 0 15px rgba(239, 68, 68, 0.9), 0 0 30px rgba(239, 68, 68, 0.6);
	}
}

/* Clock badge - Dashboard style with SVG icon */
.holdings-clock-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.375rem 0.625rem;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.1));
	border: 1.5px solid rgba(59, 130, 246, 0.4);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.holdings-clock-badge .clock-icon {
	width: 1rem;
	height: 1rem;
	color: var(--accent-primary, #3b82f6);
	stroke-width: 2;
}

.holdings-clock-badge .clock-hour {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--accent-primary, #3b82f6);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.holdings-clock-badge:hover {
	transform: scale(1.1);
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
	border-color: rgba(59, 130, 246, 0.7);
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.15));
}

.holdings-clock-badge:hover .clock-icon {
	animation: clock-tick 0.5s ease-in-out;
}

@keyframes clock-tick {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(15deg); }
	75% { transform: rotate(-15deg); }
}

/* ============================================
   PAGINATION - Same as Trade History
   ============================================ */

.holdings-compact-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.06));
	background: var(--bg-elevated, rgba(255, 255, 255, 0.02));
}

[data-theme="light"] .holdings-compact-pagination,
.light-mode .holdings-compact-pagination {
	background: var(--bg-secondary, #f9fafb);
	border-top-color: var(--border-primary, rgba(0, 0, 0, 0.08));
}

.holdings-compact-pagination .pagination-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	background: transparent;
	border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.1));
	color: var(--text-secondary, #94a3b8);
	cursor: pointer;
	transition: all 0.2s;
}

.holdings-compact-pagination .pagination-btn:hover:not(:disabled) {
	background: var(--bg-elevated, rgba(255, 255, 255, 0.05));
	border-color: var(--accent-primary, #3b82f6);
	color: var(--accent-primary, #3b82f6);
}

.holdings-compact-pagination .pagination-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.holdings-compact-pagination .pagination-info {
	font-size: 0.875rem;
	color: var(--text-secondary, #94a3b8);
	font-weight: 500;
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.holdings-compact-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
}

.holdings-compact-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	color: var(--text-tertiary, #64748b);
	text-align: center;
}

.holdings-compact-empty svg {
	margin-bottom: 1rem;
	opacity: 0.5;
}

.holdings-compact-empty p {
	margin: 0;
	font-size: 0.875rem;
}

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

@media (max-width: 768px) {
	.holdings-compact-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.holdings-compact-tabs {
		width: 100%;
	}
	
	.holdings-compact-tabs button {
		flex: 1;
		justify-content: center;
	}
	
	.holdings-compact-table thead th,
	.holdings-compact-table tbody td {
		padding: 0.875rem 1rem;
	}
}

/* ============================================
   ENTRY CELL - Price + Date stacked
   ============================================ */

.holdings-entry-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.125rem;
}

.holdings-entry-date {
	font-size: 0.6875rem;
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	color: var(--text-tertiary, #64748b);
	letter-spacing: 0.02em;
	opacity: 0.8;
}

[data-theme="light"] .holdings-entry-date,
.light-mode .holdings-entry-date {
	color: var(--text-tertiary, #64748b);
}