/**
 * Global Symbol Search Styles
 *
 * Autocomplete dropdown styles for the navigation symbol search.
 * Follows existing patterns from trading.html autocomplete.
 */

/* ==================== Container ==================== */

.symbol-search-container {
	position: relative;
}

/* ==================== Dropdown ==================== */

.symbol-search-dropdown {
	max-height: 280px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.symbol-search-dropdown::-webkit-scrollbar {
	width: 6px;
}

.symbol-search-dropdown::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.dark .symbol-search-dropdown::-webkit-scrollbar-track {
	background: #374151;
}

.symbol-search-dropdown::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

.dark .symbol-search-dropdown::-webkit-scrollbar-thumb {
	background: #4b5563;
}

/* ==================== Search Items ==================== */

.symbol-search-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid #f3f4f6;
}

.dark .symbol-search-item {
	border-bottom-color: #374151;
}

.symbol-search-item:last-child {
	border-bottom: none;
}

.symbol-search-item:hover,
.symbol-search-item.selected {
	background-color: #f3f4f6;
}

.dark .symbol-search-item:hover,
.dark .symbol-search-item.selected {
	background-color: #374151;
}

/* Symbol name */
.symbol-search-item .symbol-name {
	font-weight: 500;
	font-size: 0.875rem;
	color: #1f2937;
}

.dark .symbol-search-item .symbol-name {
	color: #f3f4f6;
}

/* ==================== Highlight Matching Text ==================== */

.symbol-search-highlight {
	background-color: #fef3c7;
	color: #92400e;
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 2px;
}

.dark .symbol-search-highlight {
	background-color: #78350f;
	color: #fef3c7;
}

/* ==================== Warning State (Unknown Symbol) ==================== */

.symbol-search-item-warning {
	opacity: 0.9;
}

.symbol-search-item-warning:hover {
	opacity: 1;
}

.symbol-warning {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: #d97706;
}

.dark .symbol-warning {
	color: #fbbf24;
}

.symbol-warning i {
	font-size: 0.7rem;
}

/* ==================== Loading State ==================== */

.symbol-search-loading {
	padding: 16px;
	text-align: center;
	font-size: 0.875rem;
	color: #6b7280;
}

.dark .symbol-search-loading {
	color: #9ca3af;
}

.symbol-search-loading i {
	margin-right: 8px;
}

/* ==================== Empty State ==================== */

.symbol-search-empty {
	padding: 8px;
}

.symbol-search-empty-text {
	padding: 8px 12px;
	text-align: center;
	font-size: 0.875rem;
	color: #9ca3af;
	font-style: italic;
}

.dark .symbol-search-empty-text {
	color: #6b7280;
}

/* ==================== Error State ==================== */

.symbol-search-error {
	padding: 16px;
	text-align: center;
	font-size: 0.875rem;
	color: #dc2626;
}

.dark .symbol-search-error {
	color: #f87171;
}

.symbol-search-error i {
	margin-right: 8px;
}

/* ==================== Mobile Adjustments ==================== */

@media (max-width: 768px) {
	.symbol-search-container {
		width: 100%;
	}

	.symbol-search-container input {
		width: 100%;
	}

	.symbol-search-item {
		padding: 12px 14px;
	}
}