/**
 * Select2 Tailwind CSS Overrides
 *
 * Ensures Select2 widgets match the existing Tailwind form styling.
 * These styles override the default Select2 theme to integrate
 * seamlessly with the application's design.
 */

/* ==========================================================================
   Consistent Form Input Styling
   Ensures text inputs, textareas match Select2 appearance
   ========================================================================== */

.form-input {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
    width: 100%;
}

.form-input:focus {
    border-color: #6366f1; /* border-indigo-500 */
    box-shadow: 0 0 0 1px #6366f1; /* ring-indigo-500 */
    outline: none;
}

.form-input::placeholder {
    color: #9ca3af; /* text-gray-400 */
}

/* Textarea variant */
.form-textarea {
    min-height: 80px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    line-height: 1.5;
    width: 100%;
    resize: vertical;
}

.form-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
    outline: none;
}

/* Checkbox styling to match form aesthetic */
.form-checkbox {
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    color: #4f46e5; /* text-indigo-600 */
}

.form-checkbox:focus {
    box-shadow: 0 0 0 2px #6366f1;
    outline: none;
}

/* Base container - ensure full width */
.select2-container {
    width: 100% !important;
}

/* Single select styling to match Tailwind inputs */
.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #6366f1; /* border-indigo-500 */
    box-shadow: 0 0 0 1px #6366f1; /* ring-indigo-500 */
    outline: none;
}

/* Rendered text styling */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111827; /* text-gray-900 */
    line-height: 1.5;
    padding-left: 0;
    padding-right: 20px;
}

/* Placeholder styling */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af; /* text-gray-400 */
}

/* Arrow positioning */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}

/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 1.5rem;
    font-weight: bold;
}

/* Dropdown container styling */
.select2-dropdown {
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    margin-top: 2px;
}

/* Search input in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem; /* text-sm */
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #6366f1; /* border-indigo-500 */
    outline: none;
    box-shadow: 0 0 0 1px #6366f1;
}

/* Results list */
.select2-results__options {
    max-height: 250px;
}

/* Individual option styling */
.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem; /* text-sm */
}

/* Highlighted (hovered) option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #fff;
}

/* Selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e0e7ff; /* bg-indigo-100 */
    color: #111827;
}

/* Loading indicator */
.select2-container--default .select2-results__option--load-more,
.select2-container--default .select2-results__option--loading {
    color: #6b7280; /* text-gray-500 */
    font-style: italic;
}

/* No results message */
.select2-container--default .select2-results__message {
    color: #6b7280; /* text-gray-500 */
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Multiple select styling (if needed in future) */
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    padding: 0.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    margin: 0.125rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-right: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fecaca; /* text-red-200 */
}

/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #f3f4f6; /* bg-gray-100 */
    cursor: not-allowed;
}

/* Ensure proper z-index for dropdown */
.select2-container--open .select2-dropdown {
    z-index: 9999;
}