@tailwind base;
@tailwind components;
@tailwind utilities;

/* Select2 CSS integration with Tailwind */
@layer components {
    .select2-container {
        @apply w-full;
    }

    .select2-container .select2-selection--single {
        @apply h-10 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500;
        line-height: 38px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        @apply text-gray-900 pl-3 pr-8;
        line-height: 38px;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        @apply right-2;
        height: 38px;
    }

    .select2-dropdown {
        @apply border border-gray-300 rounded-md shadow-lg;
    }

    .select2-container--open .select2-selection--single {
        @apply border-blue-500 ring-1 ring-blue-500;
    }

    .select2-results__option {
        @apply px-3 py-2 text-gray-900;
    }

    .select2-results__option--highlighted {
        @apply bg-blue-600 text-white;
    }

    .select2-results__option--selected {
        @apply bg-gray-100;
    }

    .select2-search--dropdown .select2-search__field {
        @apply border border-gray-300 rounded px-3 py-2 w-full;
    }
}