/* Select2 minimal custom styling - Bootstrap 4.x compatible */
/* The select2-bootstrap4-theme handles most styling, we only add minimal fixes */

/* Match Select2 arrow with native select styling from autoexpo.css */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    width: 2em !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    background: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23333' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 0.75rem center/1em !important;
}

/* Hide the default Select2 arrow icon (b element with border triangle) */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Ensure dropdown overlays other controls */
.select2-container--open {
    z-index: 9999;
}

/* Dropdown shadow for better visibility */
.select2-dropdown {
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Fix width for Select2 in Bootstrap grid */
.select2-container {
    width: 100% !important;
}

/* Responsive vertical spacing - match Bootstrap mb-1 mb-lg-0 pattern */
.select2-container {
    margin-bottom: 0.25rem; /* Same as Bootstrap mb-1 */
}

@media (min-width: 992px) {
    .select2-container {
        margin-bottom: 0; /* Same as Bootstrap mb-lg-0 */
    }
}

/* Disabled state styling */
.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* ============================================ */
/* Multi-select chips/tags styling             */
/* ============================================ */

/* Container - match single select height, grow with content */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 38px !important;
    height: auto !important;
    padding: 0.28rem 0.375rem !important;
    overflow: hidden !important; /* Contain floated chips */
}

/* Rendered list - contain floats */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Rendered list clearfix */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Chips/tags styling - AutoExpo dark blue (#2c3e50) */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    color: #fff !important;
    margin: 2px 4px 2px 0 !important;
}

/* Chip remove button (X) styling - clean look */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,0.7) !important;
    font-weight: bold !important;
    margin-right: 5px !important;
    border: none !important;
    background: transparent !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
    background: transparent !important;
}

/* Search input - proper alignment */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 2px 0 !important;
}

/* Focus state */
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}