/* Clean Select2 Styling for BundesTrip */

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

/* Selection area styling */
.select2-selection--clean {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    min-height: 42px !important;
    padding: 0.375rem 0.5rem !important;
}

/* Dropdown styling */
.select2-dropdown--clean {
    border: 1px solid #80bdff !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin-top: 2px !important;
}

/* Hide search box */
.select2-search--dropdown {
    display: none !important;
}

/* Results styling */
.select2-results__options {
    padding: 0.25rem 0 !important;
    max-height: 280px !important;
}

.select2-results__option {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #f8f9fa !important;
    color: #043d7c !important;
    border-left: 3px solid #043d7c !important;
}

.select2-results__option[aria-selected=true] {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Selection placeholder */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #6c757d !important;
    margin: 6px 0 6px 6px !important; /* Better positioning */
    line-height: 24px !important; /* Match the height of selections */
    display: inline-block !important;
    /* Removed float as it conflicts with inline-block */
}

/* Selected items */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #043d7c !important;
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.2rem 0.5rem 0.2rem 1.8rem !important;
    margin: 2px 3px 2px 0 !important; /* Reduce margins for tighter fit */
    font-size: 0.85rem !important; /* Slightly smaller font */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 24px !important; /* Reduce height to fit better */
    max-width: calc(33% - 6px) !important; /* Limit width to show max 3 items per row */
    flex-shrink: 0 !important; /* Prevent shrinking */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Remove button (X) in selections */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #043d7c !important;
    border: none !important;
    background: none !important;
    opacity: 0.8;
    position: absolute !important;
    top: 45% !important; /* Center vertically */
    transform: translateY(-50%) !important; /* Perfect vertical centering */
    margin-right: 0 !important; /* Remove default margin */
    font-weight: bold !important;
    font-size: 1rem !important;
}

/* Clear All Button (X) styling */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    top: 13.5px !important; /* Adjust to match the visual center of the container */
    right: 8px !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    z-index: 10 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 1px !important;
}

/* Hide clear button when no selections */
.select2-container--default .select2-selection--multiple:not(.has-selections) .select2-selection__clear {
    display: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1) !important; /* Slight background on hover */
    border-radius: 0px !important;
}

/* Make the container tall enough for the content */
.select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    height: 42px !important; /* Keep fixed height */
    transition: none !important; /* Remove transition that allows growth */
    cursor: pointer;
    overflow: hidden !important; /* Ensure content doesn't overflow */
    padding: 0 5px !important;
    display: flex !important;
    align-items: flex-start !important; /* Change to flex-start for better content handling */
}

/* Remove the container growth when items are added */
.select2-container--default .select2-selection--multiple.has-selections {
    height: 42px !important; /* Keep fixed height instead of auto */
    min-height: 42px !important;
    padding: 5px 5px !important; /* Equal padding top and bottom */
}

/* Ensure text doesn't overlap with remove button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    white-space: nowrap !important;
}

/* Selection rendered wrapper */
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    width: 100% !important;
    align-items: center !important;
    min-height: 32px !important; /* Set minimum height for consistency */
}

/* Hide the search input completely - critical fix */
.select2-search--inline {
    display: none !important; /* Force hiding the search input */
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    display: none !important; /* Double ensure it's hidden */
}

/* Add special styling when dropdown opens */
.select2-container--open .select2-selection--clean {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Invalid state */
.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545 !important;
}

/* Base styling for select elements before Select2 initialization */
select.form-select[multiple] {
    height: 42px !important; /* Match the height of other form controls */
    opacity: 0.01 !important; /* Not fully transparent but effectively hidden */
    position: absolute !important;
    top: 0;
    left: 0;
}


#mustTeamsContainer {
    position: relative;
    min-height: 42px !important;
    height: 42px !important; /* Keep fixed height */
    margin-bottom: 1rem !important;
    transition: none !important; /* Remove transition */
}

#mustTeamsContainer.has-selections {
    height: 42px !important; /* Keep fixed instead of auto */
    min-height: 42px !important;
}


#mustTeamsContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    z-index: -1; /* Change from 1 to -1 so it doesn't block clicks */
}

/* Hide the placeholder once Select2 is initialized */
.select2-container--default + select + #mustTeamsContainer::before {
    display: none;
}

/* Show the select once it's properly initialized */
.select2-initialized select.form-select[multiple] {
    opacity: 1;
}

/* Single select styling to match multiple select */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    padding: 0.375rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
}

/* Dropdown arrow styling */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    width: 30px !important;
}

/* Text in the single select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #212529 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

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

/* Ensure placeholder text is styled consistently */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
}

/* Ensure selected option is styled consistently */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.9rem !important;
}

/* Fix height of single-selection dropdown options */
.select2-results__option {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

/* Add this to base.css at the top */
/* Hide selects until fully styled to prevent FOUC */
.select-hidden {
    visibility: hidden !important;
}

/* Also add this class to the body initially */
body.loading-select2 {
    overflow-y: scroll !important; /* Prevent layout shift by always showing scrollbar */
}


/* Add these fixes to select2.css */

/* Fix dropdown transparency and visibility */
.select2-dropdown {
    background-color: white !important;
    z-index: 9999 !important; /* Ensure high z-index */
    opacity: 1 !important;
}

/* Ensure the dropdown container is properly positioned */
.select2-container--open {
    z-index: 9999 !important;
}

/* Ensure the dropdown menu has a solid background */
.select2-results {
    background-color: white !important;
}

/* Add this to ensure dropdowns open on top of the form */
body.select2-dropdown-open {
    position: relative;
    z-index: 1;
}

/* Smoother transitions for Select2 elements */

/* Remove delay from showing select2 elements */
body.select2-ready .select-hidden {
    visibility: visible !important;
    transition: none !important;
}


/* Ensure the dropdown container itself has high z-index */
.select2-container--open {
  z-index: 9999 !important;
}

/* Make sure dropdowns aren't being clipped by any containing elements */
body.select2-open {
  overflow: visible !important;
}


/* Adjust text position in selected items (blue boxes) to align with logo */
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display {
  position: relative;
  top: 2.5px; /* Move text down 1px to align with logo */
  display: inline-block;
}

/* Remove Scrollbar Arrows from Select2 Dropdowns - Add to select2.css */

/* Remove all scrollbar arrows/buttons from Select2 dropdowns */
.select2-results__options::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Remove increment/decrement buttons specifically */
.select2-results__options::-webkit-scrollbar-button:increment,
.select2-results__options::-webkit-scrollbar-button:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Remove corner buttons */
.select2-results__options::-webkit-scrollbar-corner {
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Also target any other Select2 scrollable elements */
.select2-dropdown::-webkit-scrollbar-button,
.select2-results::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.select2-dropdown::-webkit-scrollbar-button:increment,
.select2-dropdown::-webkit-scrollbar-button:decrement,
.select2-results::-webkit-scrollbar-button:increment,
.select2-results::-webkit-scrollbar-button:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure clean track without button spaces */
.select2-results__options::-webkit-scrollbar-track {
    border-radius: 2px !important;
    margin: 0 !important;
    background: #f1f1f1 !important;
}

/* Keep the beautiful blue scrollbar styling */
.select2-results__options::-webkit-scrollbar {
    width: 4px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
    border-radius: 2px !important;
    border: none !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark) !important;
}

/* Remove any track pieces that might contain arrows */
.select2-results__options::-webkit-scrollbar-track-piece {
    background: transparent !important;
    margin: 0 !important;
}

/* Also add this for native form elements that might show in the index */
.form-select::-webkit-scrollbar-button,
select::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.form-select::-webkit-scrollbar-button:increment,
.form-select::-webkit-scrollbar-button:decrement,
select::-webkit-scrollbar-button:increment,
select::-webkit-scrollbar-button:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Clean up any other potential arrow sources */
.select2-container *::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure no space is reserved for buttons */
.select2-results__options::-webkit-scrollbar-track {
    border-radius: 2px !important;
    background-clip: content-box !important;
}

/* Blue background for Select2 optgroup labels */
.select2-results__group {
    background-color: #043d7c !important; /* Your main blue */
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.97rem !important;
    letter-spacing: 0.01em;
    margin-top: 0 !important;
}

/* Responsive: smaller font for optgroup labels on mobile */
@media (max-width: 768px) {
  .select2-results__group {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.6rem !important;
  }
}