/* 1. THE MAIN BOX (Normal State) */
.ts-wrapper.my-tom-select .ts-control {
    margin-top: 0.25rem; /* mt-1 */
    width: 100% !important;
    background-color: #ffffff !important; /* bg-white */
    border: 1px solid #d1d5db !important; /* border-gray-300 */
    border-radius: 0.5rem !important; /* rounded-lg (8px) */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    min-height: 42px; 
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
}

/* 2. THE FOCUS STATE (When clicking/typing) */
.ts-wrapper.my-tom-select.focus .ts-control {
    border-color: #3b82f6 !important; /* focus:border-blue-500 */
    outline: none !important;
    /* Manual 'ring' effect using box-shadow */
    box-shadow: 0 0 0 1px #3b82f6 !important; /* focus:ring-1 */
}

/* 3. DROPDOWN ALIGNMENT & DESIGN */
.ts-wrapper.my-tom-select .ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important; /* border-gray-200 */
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-xl */
    margin-top: 4px !important;
    width: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
}

/* 4. OPTION HOVER COLORS */
.ts-wrapper.my-tom-select .ts-dropdown .active {
    background-color: #eff6ff !important; /* bg-blue-50 */
    color: #1d4ed8 !important; /* text-blue-700 */
}

/* 5. PLACEHOLDER COLOR */
.ts-wrapper.my-tom-select .ts-control input::placeholder {
    color: #9ca3af !important; /* gray-400 */
}

/* 6. TEXT INSIDE BOX */
.ts-wrapper.my-tom-select .ts-control .item {
    color: #111827 !important; /* gray-900 */
}