/* Tom Select - Match Tailwind forms select styling */
.ts-wrapper {
    width: 100%;
}

.ts-wrapper.single .ts-control {
    border: 1px solid oklch(55.1% .027 264.364) !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right .5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    padding: .5rem .75rem !important;
    padding-right: 2.5rem !important;
    box-shadow: none !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.ts-wrapper.single .ts-control > input {
    font-size: 1rem !important;
    padding: 0 !important;
}

.ts-wrapper.single.focus .ts-control {
    border-color: oklch(54.6% .245 262.881) !important;
    box-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) oklch(54.6% .245 262.881) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

.ts-wrapper .ts-dropdown {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    background: white;
    margin-top: 4px;
    z-index: 50;
}

.ts-wrapper .ts-dropdown .ts-dropdown-content {
    max-height: 15rem;
    overflow-y: auto;
}

.ts-wrapper .ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    cursor: pointer;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    background-color: #eef2ff;
    color: #312e81;
}

.ts-wrapper .ts-dropdown .option.selected {
    background-color: #e0e7ff;
}

.ts-wrapper .ts-control > input::placeholder {
    color: #9ca3af;
}

.ts-wrapper .clear-button {
    color: #9ca3af;
    right: 1.75rem !important;
}

.ts-wrapper .clear-button:hover {
    color: #4b5563;
}

/* Hide the default Tom Select caret */
.ts-wrapper.single .ts-control::after {
    display: none !important;
}