.pitel-svelecte {
	/* CSS Variables */
	--sv-bg: transparent !important;
	--sv-color: inherit;
	--sv-min-height: 42px;
	--sv-border-color: #d1d5db;
	--sv-border: 1px solid var(--sv-border-color) !important;
	--sv-active-border: 1px solid #cfe3f1 !important;
	--sv-active-outline: none;
	--sv-item-selected-bg: #cfe3f1 !important;
	--sv-item-selected-color: #0c588c;
	--sv-dropdown-bg: #ffffff;
	--sv-dropdown-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--sv-item-btn-icon: #0c588c;

	font-size: 0.875rem;
	border-radius: 0.375rem;
}

/* Control Input */
.pitel-svelecte .svelecte-control {
	--sv-bg: transparent !important;
	--sv-color: inherit;
	--sv-min-height: 42px;
	--sv-border-color: #d1d5db;
	--sv-border: 1px solid var(--sv-border-color) !important;
	--sv-active-border: 1px solid #cfe3f1 !important;
	--sv-active-outline: none;
	--sv-item-selected-bg: #cfe3f1 !important;

	background-color: transparent !important;
	border-radius: 0.375rem;
}

/* Placeholder */
.pitel-svelecte input::placeholder {
	color: #9ca3af;
	opacity: 1;
}

/* Dropdown Menu */
.pitel-svelecte .sv-dropdown {
	background-color: #ffffff !important;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	margin-top: 0.25rem;
	max-height: min(300px, 50vh);
	overflow-y: auto;
	overflow-x: hidden;
	width: 100% !important;
	min-width: 100%;
}

/* Force dropdown to prefer bottom position */
.pitel-svelecte[data-pos="bottom"] .sv-dropdown,
.pitel-svelecte .sv-dropdown {
	top: 100% !important;
	bottom: auto !important;
	margin-top: 0.25rem;
	margin-bottom: 0;
}

/* Only show on top when explicitly positioned */
.pitel-svelecte[data-pos="top"] .sv-dropdown {
	top: auto !important;
	bottom: 100% !important;
	margin-top: 0;
	margin-bottom: 0.25rem;
}

/* Dropdown Items */
.pitel-svelecte .sv-item {
	display: flex;
	align-items: center;
	border-radius: 0.375rem !important;
	padding: 0.25rem 0.25rem;
	transition: background-color 0.15s ease;
}

.pitel-svelecte .sv-item:hover {
	background-color: #f3f4f6;
}

.pitel-svelecte .sv-item.is-active {
	background-color: #eff6ff;
}

/* Item Content */
.pitel-svelecte .sv-dropdown-content .sv-item-content {
	color: #374151 !important;
	font-size: 0.875rem;
}

/* Item Button (for selected items in multiple mode) */
.pitel-svelecte .sv-item .sv-item-btn {
	border-top-right-radius: 0.375rem !important;
	border-bottom-right-radius: 0.375rem !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	background-color: #cfe3f1;
	color: #0c588c;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

/* Selected Item Chip */
.pitel-svelecte .sv-control .sv-item-content {
	background-color: #cfe3f1;
	color: #0c588c;
	border-top-left-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
}

/* Clear Button */
.pitel-svelecte .sv-control .sv-item-btn {
	color: #0c588c !important;
}

.pitel-svelecte .sv-control .sv-item-btn:hover {
	background-color: #9fc8e3 !important;
	color: #0a4670 !important;
}

/* Disabled State */
.pitel-svelecte.is-disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* Focus State */
.pitel-svelecte:focus-within .svelecte-control {
	--sv-border-color: #1075ba;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}