/**
 * Dashboard Mobile Filter Bar - Bloomberg Compact
 * Always-visible controls: Search + Filters + Sort + Quick chips
 */

/* ============================================
   MOBILE FILTER BAR (Always Visible)
   ============================================ */
@media (max-width: 1023px) {
	.dashboard-mobile-filter-bar {
		position: fixed;
		top: 64px; /* Below header */
		left: 0;
		right: 0;
		z-index: 90;
		background: rgba(17, 23, 37, 0.95);
		border-bottom: 1px solid var(--border-primary);
		padding: 10px 16px;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* Active Filters Chips Bar (Bloomberg style - compact, balanced spacing) */
	.mobile-active-chips-bar {
		padding: 10px 0px 0px 0px;
		overflow: hidden;
	}

	.mobile-chips-scroll {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 2px;
	}

	.mobile-chips-scroll::-webkit-scrollbar {
		display: none;
	}

	.mobile-active-chip {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		height: 28px;
		padding: 0 10px 0 12px;
		background: rgba(59, 130, 246, 0.1);
		border: 1px solid rgba(59, 130, 246, 0.3);
		border-radius: 14px;
		color: var(--accent-primary);
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
		transition: all 0.15s ease;
		flex-shrink: 0;
	}

	.mobile-active-chip svg {
		width: 12px !important;
		height: 12px !important;
		flex-shrink: 0;
		opacity: 0.7;
	}

	.mobile-active-chip:active {
		transform: scale(0.96);
		background: rgba(59, 130, 246, 0.15);
	}

	/* Signal chips with custom colors */
	.mobile-active-chip.signal-chip.signal-long {
		background: rgba(59, 130, 246, 0.15);
		border-color: rgba(59, 130, 246, 0.4);
		color: var(--accent-primary);
	}

	.mobile-active-chip.signal-chip.signal-buy {
		background: rgba(34, 197, 94, 0.15);
		border-color: rgba(34, 197, 94, 0.4);
		color: var(--gain);
	}

	.mobile-active-chip.signal-chip.signal-sell {
		background: rgba(239, 68, 68, 0.15);
		border-color: rgba(239, 68, 68, 0.4);
		color: var(--loss);
	}

	.mobile-active-chip.signal-chip.signal-out {
		background: rgba(156, 163, 175, 0.15);
		border-color: rgba(156, 163, 175, 0.4);
		color: var(--text-tertiary);
	}

	/* "+X more" chip */
	.mobile-active-chip.more-chip {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(255, 255, 255, 0.1);
		color: var(--text-tertiary);
		padding: 0 12px;
	}

	.mobile-active-chip.more-chip:active {
		background: rgba(255, 255, 255, 0.08);
	}

	/* Smooth collapse animation for controls row */
	.dashboard-mobile-filter-bar .mobile-controls-row {
		margin-top: 10px;
	}

	/* ============================================
	   EMPTY STATE (No Results) - Bloomberg style
	   ============================================ */
	.mobile-empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 24px;
		text-align: center;
		min-height: 400px;
	}

	.empty-state-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 20px;
		color: var(--text-tertiary);
		opacity: 0.5;
	}

	.empty-state-icon svg {
		width: 100% !important;
		height: 100% !important;
	}

	.empty-state-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-primary);
		margin-bottom: 8px;
	}

	.empty-state-text {
		font-size: 14px;
		color: var(--text-secondary);
		margin-bottom: 24px;
		max-width: 280px;
		line-height: 1.5;
	}

	.empty-state-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 20px;
		background: var(--accent-primary);
		color: white;
		font-size: 14px;
		font-weight: 600;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s ease;
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	}

	.empty-state-btn svg {
		width: 18px !important;
		height: 18px !important;
	}

	.empty-state-btn:active {
		transform: scale(0.98);
		box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
	}
	
	/* Add padding to main content to account for fixed bar */
	/* Only search bar by default (minimal) */
	.dashboard-mobile-filter-bar + * {
		margin-top: 80px; /* Search (40px) + padding top/bottom (20px+20px) */
	}

	/* ============================================
	   ROW 1: SEARCH BAR (Compact)
	   ============================================ */
	.mobile-search-bar {
		position: relative;
	}

	.mobile-search-icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 16px;
		height: 16px;
		color: var(--text-tertiary);
		pointer-events: none;
	}

	.mobile-search-input {
		width: 100%;
		height: 40px;
		background: var(--bg-secondary);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		padding: 0 40px 0 40px;
		font-size: 14px;
		color: var(--text-primary);
		transition: all 0.2s ease;
	}

	.mobile-search-input:focus {
		outline: none;
		border-color: var(--accent-primary);
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
	}

	.mobile-search-input::placeholder {
		color: var(--text-tertiary);
	}

	.mobile-search-clear {
		position: absolute;
		right: 48px;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		background: transparent;
		border: none;
		border-radius: 50%;
		color: var(--text-tertiary);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.15s ease;
		z-index: 2;
	}

	.mobile-search-clear svg {
		width: 14px !important;
		height: 14px !important;
	}

	.mobile-search-clear:active {
		background: rgba(239, 68, 68, 0.1);
		color: var(--loss);
	}

	/* Clear ALL filters button (Site red style - leggero leggero) */
	.mobile-clear-all-top {
		position: absolute;
		right: 48px;
		top: 50%;
		transform: translateY(-50%);
		height: 32px;
		padding: 0 10px;
		background: rgba(239, 68, 68, 0.06);
		border: 1px solid rgba(239, 68, 68, 0.3);
		border-radius: 16px;
		color: var(--loss);
		font-size: 12px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 5px;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 2;
		white-space: nowrap;
	}

	.mobile-clear-all-top svg {
		width: 12px !important;
		height: 12px !important;
		flex-shrink: 0;
		opacity: 0.8;
	}

	.mobile-clear-label {
		font-size: 12px;
		line-height: 1;
	}

	.mobile-clear-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: rgba(239, 68, 68, 0.15);
		color: var(--loss);
		font-size: 10px;
		font-weight: 700;
		border-radius: 9px;
		line-height: 1;
	}

	.mobile-clear-all-top:hover {
		background: rgba(239, 68, 68, 0.1);
		border-color: rgba(239, 68, 68, 0.4);
	}

	.mobile-clear-all-top:active {
		transform: translateY(-50%) scale(0.96);
		background: rgba(239, 68, 68, 0.15);
		border-color: var(--loss);
	}

	/* Advanced Toggle Button (always visible, right side) - Bloomberg polish */
	.mobile-advanced-toggle {
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		background: linear-gradient(135deg, 
			var(--bg-secondary) 0%, 
			rgba(26, 31, 46, 0.98) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		color: var(--text-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 2;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.mobile-advanced-toggle svg {
		width: 16px !important;
		height: 16px !important;
		flex-shrink: 0;
		display: block;
		transition: transform 0.2s ease;
	}

	.mobile-advanced-toggle:active {
		transform: translateY(-50%) scale(0.96);
	}

	.mobile-advanced-toggle.active {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.2) 0%, 
			rgba(37, 99, 235, 0.15) 100%);
		border-color: var(--accent-primary);
		color: var(--accent-primary);
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2),
		            0 2px 8px rgba(59, 130, 246, 0.3);
	}

	.mobile-advanced-toggle.active svg {
		transform: rotate(180deg);
	}

	/* Adjust search input padding dynamically */
	.mobile-search-input {
		padding-right: 48px; /* Default: Advanced (36px) + spacing (12px) */
	}

	.mobile-search-input:not(:placeholder-shown) {
		padding-right: 80px; /* Clear search (28px) + Advanced (36px) + spacing (16px) */
	}

	/* When Clear ALL button is visible (filters active, no search) */
	.dashboard-mobile-filter-bar:has(.mobile-clear-all-top[style*="display"]) .mobile-search-input:placeholder-shown {
		padding-right: 130px; /* Clear ALL button + Advanced + spacing */
	}

	/* ============================================
	   ROW 2: 3 EQUAL BUTTONS (Filters / Sort / Quick)
	   ============================================ */
	.mobile-controls-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	/* Unified Button Style (Compact) - Bloomberg standard */
	.mobile-control-btn {
		height: 40px;
		background: var(--bg-secondary);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		color: var(--text-secondary);
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.15s ease;
		position: relative;
		padding: 0 12px;
	}

	.mobile-control-btn svg {
		width: 16px !important;
		height: 16px !important;
		flex-shrink: 0;
		display: block;
	}

	.mobile-control-btn:active {
		transform: scale(0.97);
	}

	.mobile-control-btn.active {
		background: rgba(59, 130, 246, 0.1);
		border-color: var(--accent-primary);
		color: var(--accent-primary);
	}

	/* Badge indicator (small dot when filters active) */
	.mobile-control-badge {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 6px;
		height: 6px;
		background: var(--accent-primary);
		border-radius: 3px;
		box-shadow: 0 0 0 2px var(--bg-secondary);
	}
}

/* ============================================
   MOBILE EXPANDED PANELS (Slide-down)
   ============================================ */
@media (max-width: 1023px) {
	.mobile-filter-panel,
	.mobile-sort-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, 
			var(--bg-primary) 0%, 
			rgba(26, 31, 46, 0.98) 100%);
		border-bottom: 1px solid var(--border-primary);
		border-left: 1px solid rgba(59, 130, 246, 0.1);
		border-right: 1px solid rgba(59, 130, 246, 0.1);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
		            0 12px 24px rgba(0, 0, 0, 0.25),
		            0 0 40px rgba(59, 130, 246, 0.08);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		            box-shadow 0.3s ease;
		z-index: 89;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.mobile-filter-panel.open,
	.mobile-sort-panel.open {
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
		            0 16px 32px rgba(0, 0, 0, 0.3),
		            0 0 60px rgba(59, 130, 246, 0.12);
	}

	.mobile-panel-content {
		padding: 16px;
	}

	/* Filter Section */
	.mobile-filter-section {
		margin-bottom: 20px;
	}

	.mobile-filter-section:last-child {
		margin-bottom: 0;
	}

	.mobile-filter-title {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--text-tertiary);
		margin-bottom: 10px;
	}

	.mobile-filter-title-toggle {
		width: 100%;
		justify-content: space-between;
		padding: 10px 12px;
		background: var(--bg-secondary);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.15s ease;
		margin-bottom: 0;
	}

	.mobile-filter-title-toggle:active {
		background: var(--bg-tertiary);
	}

	.mobile-filter-icon {
		width: 14px;
		height: 14px;
		opacity: 0.7;
	}

	.mobile-filter-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.mobile-filter-option {
		height: 44px;
		background: linear-gradient(135deg, 
			var(--bg-secondary) 0%, 
			rgba(31, 38, 56, 0.95) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		padding: 0 14px;
		font-size: 14px;
		font-weight: 500;
		color: var(--text-primary);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.mobile-filter-option:active {
		transform: scale(0.97);
	}

	.mobile-filter-option.active {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.2) 0%, 
			rgba(37, 99, 235, 0.15) 100%);
		border-color: var(--accent-primary);
		color: var(--accent-primary);
		box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3),
		            0 2px 6px rgba(59, 130, 246, 0.2);
	}

	/* Accordion for Advanced Filters */
	.mobile-filter-accordion {
		margin-bottom: 8px;
	}

	.mobile-filter-accordion-header {
		width: 100%;
		height: 44px;
		background: linear-gradient(135deg, 
			var(--bg-secondary) 0%, 
			rgba(31, 38, 56, 0.95) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		padding: 0 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		font-size: 14px;
		font-weight: 500;
		color: var(--text-primary);
	}

	.mobile-filter-accordion-header:active {
		transform: scale(0.99);
	}

	.mobile-filter-accordion-header.has-selection {
		border-color: rgba(59, 130, 246, 0.5);
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.1) 0%, 
			rgba(37, 99, 235, 0.05) 100%);
	}

	.mobile-filter-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		background: var(--accent-primary);
		color: white;
		font-size: 11px;
		font-weight: 700;
		border-radius: 10px;
		margin-left: auto;
	}

	.mobile-filter-chevron {
		width: 16px;
		height: 16px;
		transition: transform 0.2s ease;
		flex-shrink: 0;
	}

	.mobile-filter-chevron.rotate {
		transform: rotate(180deg);
	}

	.mobile-filter-accordion-content {
		margin-top: 8px;
		padding: 0 4px;
	}

	.mobile-filter-options-list {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mobile-filter-checkbox-label {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 10px;
		background: var(--bg-tertiary);
		border-radius: 6px;
		cursor: pointer;
		transition: background 0.15s ease;
		font-size: 14px;
		color: var(--text-primary);
	}

	.mobile-filter-checkbox-label:active {
		background: rgba(59, 130, 246, 0.05);
	}

	.mobile-filter-checkbox {
		width: 18px;
		height: 18px;
		accent-color: var(--accent-primary);
		cursor: pointer;
	}

	/* Active Filter Chips */
	.mobile-active-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 10px;
	}

	.mobile-filter-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		background: rgba(59, 130, 246, 0.15);
		border: 1px solid rgba(59, 130, 246, 0.3);
		border-radius: 16px;
		font-size: 12px;
		font-weight: 500;
		color: var(--accent-primary);
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.mobile-filter-chip:active {
		transform: scale(0.95);
		background: rgba(59, 130, 246, 0.25);
	}

	.mobile-filter-chip-x {
		width: 12px;
		height: 12px;
	}

	.mobile-clear-all-btn {
		width: 100%;
		height: 40px;
		background: var(--bg-primary);
		border: 1px dashed var(--border-primary);
		border-radius: 8px;
		color: var(--text-secondary);
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.mobile-clear-all-btn:active {
		background: var(--bg-secondary);
		color: var(--text-primary);
	}

	/* ============================================
	   SAVED FILTERS (Mobile)
	   ============================================ */
	.mobile-saved-filters-list {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.mobile-saved-filter-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.mobile-saved-filter-btn {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 12px;
		background: linear-gradient(135deg, 
			var(--bg-secondary) 0%, 
			rgba(31, 38, 56, 0.95) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		color: var(--text-primary);
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		text-align: left;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.mobile-saved-filter-btn svg {
		width: 16px !important;
		height: 16px !important;
		flex-shrink: 0;
		color: var(--accent-primary);
	}

	.mobile-saved-filter-btn:active {
		transform: scale(0.98);
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.1) 0%, 
			rgba(37, 99, 235, 0.05) 100%);
	}

	.mobile-saved-filter-name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mobile-saved-filter-count {
		color: var(--text-tertiary);
		font-size: 12px;
	}

	.mobile-saved-filter-delete {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(239, 68, 68, 0.1);
		border: 1px solid rgba(239, 68, 68, 0.2);
		border-radius: 8px;
		color: var(--loss);
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.mobile-saved-filter-delete svg {
		width: 18px !important;
		height: 18px !important;
	}

	.mobile-saved-filter-delete:active {
		background: rgba(239, 68, 68, 0.2);
		transform: scale(0.95);
	}

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

	.mobile-save-current-btn svg {
		width: 16px !important;
		height: 16px !important;
	}

	.mobile-save-current-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		box-shadow: none;
	}

	.mobile-save-current-btn:active:not(:disabled) {
		transform: scale(0.98);
		box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
	}

	/* Signal Chips - Special colors */
	.signal-chip-long {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
		border-color: rgba(59, 130, 246, 0.4) !important;
		color: var(--accent-primary) !important;
	}

	.signal-chip-long.active {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
		border-color: var(--accent-primary) !important;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3),
		            0 2px 8px rgba(59, 130, 246, 0.3) !important;
	}

	.signal-chip-buy {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%) !important;
		border-color: rgba(34, 197, 94, 0.4) !important;
		color: var(--gain) !important;
	}

	.signal-chip-buy.active {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%) !important;
		border-color: var(--gain) !important;
		box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3),
		            0 2px 8px rgba(34, 197, 94, 0.3) !important;
	}

	.signal-chip-sell {
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
		border-color: rgba(239, 68, 68, 0.4) !important;
		color: var(--loss) !important;
	}

	.signal-chip-sell.active {
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%) !important;
		border-color: var(--loss) !important;
		box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3),
		            0 2px 8px rgba(239, 68, 68, 0.3) !important;
	}

	.signal-chip-out {
		background: linear-gradient(135deg, rgba(156, 163, 175, 0.15) 0%, rgba(107, 114, 128, 0.1) 100%) !important;
		border-color: rgba(156, 163, 175, 0.4) !important;
		color: var(--text-tertiary) !important;
	}

	.signal-chip-out.active {
		background: linear-gradient(135deg, rgba(156, 163, 175, 0.3) 0%, rgba(107, 114, 128, 0.2) 100%) !important;
		border-color: var(--text-tertiary) !important;
		box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.3),
		            0 2px 8px rgba(156, 163, 175, 0.3) !important;
	}

	/* Gain/Loss filters */
	.mobile-filter-gain {
		color: var(--gain) !important;
	}

	.mobile-filter-gain.active {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%) !important;
		border-color: var(--gain) !important;
	}

	.mobile-filter-loss {
		color: var(--loss) !important;
	}

	.mobile-filter-loss.active {
		background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
		border-color: var(--loss) !important;
	}

	.mobile-filter-mini-icon {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}

	/* ============================================
	   PANEL HEADERS & FOOTERS
	   ============================================ */

	/* Panel Header - Bloomberg professional */
	.mobile-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--border-secondary);
		background: linear-gradient(180deg, 
			rgba(31, 38, 56, 0.98) 0%, 
			var(--bg-primary) 100%);
		position: sticky;
		top: 0;
		z-index: 10;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		min-height: 52px;
	}

	.mobile-panel-title {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--text-primary);
		font-weight: 600;
		font-size: 15px;
		line-height: 1.4;
	}

	.mobile-panel-icon {
		width: 18px !important;
		height: 18px !important;
		flex-shrink: 0;
		display: block;
	}

	.mobile-panel-count {
		color: var(--text-tertiary);
		font-size: 14px;
		font-weight: 400;
		margin-left: 2px;
	}

	/* Close button - Bloomberg standard (44px touch target) */
	.mobile-panel-close {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.05);
		color: var(--text-secondary);
		border: 1px solid rgba(255, 255, 255, 0.1);
		transition: all 0.15s ease;
		flex-shrink: 0;
		cursor: pointer;
	}

	.mobile-panel-close:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.15);
	}

	.mobile-panel-close:active {
		background: rgba(255, 255, 255, 0.12);
		transform: scale(0.95);
	}

	.mobile-panel-close svg {
		width: 18px !important;
		height: 18px !important;
		flex-shrink: 0;
		display: block;
		stroke-width: 2.5;
	}

	/* Panel Footer (Sticky) - Bloomberg standard with results preview */
	.mobile-panel-footer {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px 16px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--border-secondary);
		background: linear-gradient(180deg, 
			var(--bg-primary) 0%, 
			rgba(31, 38, 56, 0.98) 100%);
		position: sticky;
		bottom: 0;
		z-index: 10;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
	}

	.mobile-panel-footer-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	/* Results Preview (Bloomberg style) */
	.mobile-results-preview {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 8px 12px;
		background: rgba(59, 130, 246, 0.06);
		border: 1px solid rgba(59, 130, 246, 0.2);
		border-radius: 8px;
		color: var(--text-secondary);
		font-size: 13px;
		font-weight: 500;
	}

	.mobile-results-icon {
		width: 16px !important;
		height: 16px !important;
		flex-shrink: 0;
		opacity: 0.7;
	}

	.mobile-results-text {
		line-height: 1;
	}

	.mobile-panel-footer-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 44px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 14px;
		line-height: 1;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

	.mobile-panel-footer-btn.secondary {
		background: var(--bg-secondary);
		color: var(--text-primary);
		border: 1px solid var(--border-primary);
	}

	.mobile-panel-footer-btn.secondary:active {
		background: var(--bg-tertiary);
		transform: scale(0.98);
	}

	.mobile-panel-footer-btn.primary {
		background: linear-gradient(135deg, 
			var(--accent-primary) 0%, 
			rgba(37, 99, 235, 0.9) 100%);
		color: white;
		border: none;
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	}

	.mobile-panel-footer-btn.primary:active {
		transform: scale(0.98);
		box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
	}

	.mobile-panel-footer-btn svg {
		width: 16px !important;
		height: 16px !important;
		flex-shrink: 0;
		display: block;
	}

	/* ============================================
	   BADGE COUNTS & INDICATORS
	   ============================================ */

	/* Badge on control buttons (Filters, Quick) - Bloomberg info style (BLU) */
	.mobile-control-badge {
		position: absolute !important;
		top: -6px !important;
		right: -6px !important;
		background: var(--accent-primary) !important;
		color: white !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		border-radius: 10px !important;
		min-width: 20px !important;
		height: 20px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 5px !important;
		box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4),
		            0 0 0 2px var(--bg-primary) !important;
		z-index: 10 !important;
	}

	/* Indicator dot on Sort button */
	.mobile-control-indicator {
		position: absolute !important;
		top: -4px !important;
		right: -4px !important;
		color: var(--accent-primary) !important;
		font-size: 16px !important;
		line-height: 1 !important;
		z-index: 10 !important;
	}

	/* Badge on Advanced toggle button - Bloomberg standard */
	.mobile-advanced-badge {
		position: absolute !important;
		top: -6px !important;
		right: -6px !important;
		background: var(--accent-primary) !important;
		color: white !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		border-radius: 10px !important;
		min-width: 20px !important;
		height: 20px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 5px !important;
		box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4),
		            0 0 0 2px var(--bg-primary) !important;
		z-index: 10 !important;
	}

	/* Sort Options Grid */
	.mobile-sort-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.mobile-sort-option {
		height: 48px;
		background: linear-gradient(135deg, 
			var(--bg-secondary) 0%, 
			rgba(31, 38, 56, 0.95) 100%);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		padding: 0 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.mobile-sort-option:active {
		transform: scale(0.98);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.mobile-sort-option.active {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.15) 0%, 
			rgba(37, 99, 235, 0.1) 100%);
		border-color: var(--accent-primary);
		box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3),
		            0 2px 6px rgba(59, 130, 246, 0.2);
	}

	.mobile-sort-label {
		font-size: 15px;
		font-weight: 500;
		color: var(--text-primary);
	}

	.mobile-sort-check {
		width: 20px;
		height: 20px;
		border: 2px solid var(--border-primary);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.15s ease;
	}

	.mobile-sort-option.active .mobile-sort-check {
		background: var(--accent-primary);
		border-color: var(--accent-primary);
	}

	.mobile-sort-check svg {
		width: 12px;
		height: 12px;
		color: white;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.mobile-sort-option.active .mobile-sort-check svg {
		opacity: 1;
	}

	/* Filter Type Grid */
	.mobile-filter-section {
		margin-bottom: 20px;
	}

	.mobile-filter-section:last-child {
		margin-bottom: 0;
	}

	.mobile-filter-title {
		font-size: 12px;
		font-weight: 700;
		color: var(--text-tertiary);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 10px;
	}

	.mobile-filter-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.mobile-filter-option {
		height: 44px;
		background: var(--bg-secondary);
		border: 1px solid var(--border-primary);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-size: 14px;
		font-weight: 600;
		color: var(--text-secondary);
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.mobile-filter-option:active {
		transform: scale(0.98);
	}

	.mobile-filter-option.active {
		background: rgba(59, 130, 246, 0.1);
		border-color: var(--accent-primary);
		color: var(--accent-primary);
	}

	/* Signal colors */
	.mobile-filter-option.signal-chip-long {
		border-color: var(--gain);
		color: var(--gain);
	}
	.mobile-filter-option.signal-chip-long.active {
		background: var(--gain);
		border-color: var(--gain);
		color: white;
	}

	.mobile-filter-option.signal-chip-buy {
		border-color: var(--accent-primary);
		color: var(--accent-primary);
	}
	.mobile-filter-option.signal-chip-buy.active {
		background: var(--accent-primary);
		border-color: var(--accent-primary);
		color: white;
	}

	.mobile-filter-option.signal-chip-sell {
		border-color: var(--loss);
		color: var(--loss);
	}
	.mobile-filter-option.signal-chip-sell.active {
		background: var(--loss);
		border-color: var(--loss);
		color: white;
	}

	.mobile-filter-option.signal-chip-out {
		border-color: var(--border-secondary);
		color: var(--text-tertiary);
	}
	.mobile-filter-option.signal-chip-out.active {
		background: var(--text-tertiary);
		border-color: var(--text-tertiary);
		color: white;
	}
}

/* ============================================
   LIGHT MODE OVERRIDES (Filter Bar + Panels)
   ============================================ */
@media (max-width: 1023px) {
	:root:not(.dark) .dashboard-mobile-filter-bar {
		background: rgba(255, 255, 255, 0.95);
		border-bottom: 1px solid rgba(229, 231, 235, 0.8);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	:root:not(.dark) .mobile-search-bar input {
		background: rgba(249, 250, 251, 0.8);
		border: 1px solid rgba(229, 231, 235, 0.8);
		color: var(--text-primary);
	}

	:root:not(.dark) .mobile-search-bar input::placeholder {
		color: var(--text-tertiary);
	}

	:root:not(.dark) .mobile-search-bar svg {
		color: var(--text-tertiary);
	}

	:root:not(.dark) .mobile-control-btn {
		background: rgba(249, 250, 251, 0.6);
		border: 1px solid rgba(229, 231, 235, 0.8);
		color: var(--text-primary);
	}

	:root:not(.dark) .mobile-control-btn:active {
		background: rgba(59, 130, 246, 0.08);
		border-color: var(--accent-primary);
	}

	:root:not(.dark) .mobile-control-btn.active {
		background: rgba(59, 130, 246, 0.08);
		border-color: var(--accent-primary);
	}

	:root:not(.dark) .mobile-advanced-toggle {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.08) 0%, 
			rgba(37, 99, 235, 0.06) 100%);
		border: 1px solid rgba(59, 130, 246, 0.2);
	}

	:root:not(.dark) .mobile-advanced-toggle:active {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.12) 0%, 
			rgba(37, 99, 235, 0.08) 100%);
	}

	:root:not(.dark) .mobile-panel {
		background: rgba(255, 255, 255, 0.98);
		border-bottom: 1px solid rgba(229, 231, 235, 0.8);
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	}

	:root:not(.dark) .mobile-panel-header {
		background: rgba(249, 250, 251, 0.8);
		border-bottom: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-panel-close {
		background: rgba(249, 250, 251, 0.6);
		border: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-panel-close:active {
		background: rgba(59, 130, 246, 0.08);
		border-color: var(--accent-primary);
	}

	:root:not(.dark) .mobile-filter-title-toggle {
		background: rgba(249, 250, 251, 0.8);
		border: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-filter-title-toggle:active {
		background: rgba(243, 244, 246, 0.9);
	}

	:root:not(.dark) .mobile-filter-checkbox-label {
		background: rgba(249, 250, 251, 0.6);
		border: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-filter-checkbox-label:active {
		background: rgba(59, 130, 246, 0.06);
	}

	:root:not(.dark) .mobile-filter-checkbox:checked + .mobile-filter-checkbox-label {
		background: rgba(59, 130, 246, 0.08);
		border-color: var(--accent-primary);
	}

	:root:not(.dark) .mobile-clear-all-top-bar {
		background: rgba(239, 68, 68, 0.04);
		border: 1px solid rgba(239, 68, 68, 0.2);
	}

	:root:not(.dark) .mobile-clear-all-top-bar:hover {
		background: rgba(239, 68, 68, 0.08);
	}

	:root:not(.dark) .mobile-clear-all-top-bar:active {
		background: rgba(239, 68, 68, 0.12);
		border-color: var(--loss);
	}

	:root:not(.dark) .mobile-filter-chip {
		background: rgba(59, 130, 246, 0.08);
		border: 1px solid rgba(59, 130, 246, 0.2);
	}

	:root:not(.dark) .mobile-filter-chip:active {
		background: rgba(59, 130, 246, 0.12);
	}

	:root:not(.dark) .mobile-saved-filter-btn {
		background: linear-gradient(135deg, 
			rgba(249, 250, 251, 0.9) 0%, 
			rgba(243, 244, 246, 0.95) 100%);
		border: 1px solid rgba(229, 231, 235, 0.8);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}

	:root:not(.dark) .mobile-saved-filter-btn:active {
		background: linear-gradient(135deg, 
			rgba(59, 130, 246, 0.08) 0%, 
			rgba(37, 99, 235, 0.04) 100%);
	}

	:root:not(.dark) .mobile-empty-state {
		background: rgba(249, 250, 251, 0.8);
		border: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-control-badge {
		background: var(--accent-primary);
		border: 2px solid rgba(255, 255, 255, 0.95);
	}

	:root:not(.dark) .mobile-advanced-badge {
		background: var(--accent-primary);
		border: 2px solid rgba(255, 255, 255, 0.95);
	}

	:root:not(.dark) .mobile-panel-footer {
		background: rgba(249, 250, 251, 0.8);
		border-top: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-panel-footer-btn.secondary {
		background: rgba(249, 250, 251, 0.6);
		border: 1px solid rgba(229, 231, 235, 0.8);
	}

	:root:not(.dark) .mobile-panel-footer-btn.secondary:active {
		background: rgba(239, 68, 68, 0.08);
	}

	:root:not(.dark) .mobile-saved-filter-delete {
		background: rgba(239, 68, 68, 0.08);
		border: 1px solid rgba(239, 68, 68, 0.15);
	}

	:root:not(.dark) .mobile-saved-filter-delete:active {
		background: rgba(239, 68, 68, 0.15);
	}
}

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