/* ========================================================= */
/*  AUTOCOMPLETE COMPONENT (Integrated with your Theme)      */
/* ========================================================= */

/* 1. Wrapper: Relative context for positioning the dropdown */
.input-autocomplete-wrapper {
    position: relative !important; /* Force override if needed */
    display: block;
}

/* 2. Toggle Icon 
   - Uses your .btn .btn-sm .btn-light classes from JS
   - Positioned absolutely to the right (end)
   - Vertical Center
*/
.dropdown-icon {
    position: absolute !important;
    inset-inline-end: 0; /* Matches your preference */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Note: Padding/Colors are handled by your .btn-light class */
}

/* 3. Dropdown Container 
   - Uses your Shadow and Colors
*/
.autocompleteSearchResults {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 20rem; /* Responsive height */
    overflow-y: auto;
    
    background-color: var(--body-bg, #fff);
    color: var(--body-color);
    
    /* Use your specific shadow variable */
    box-shadow: var(--box-shadow-larger);
    
    /* Matches your border radius style */
    border-radius: 0 0 0.3em 0.3em; 
    border: 0.1em solid var(--color-light);
    
    z-index: 1005; /* Higher than .dropdown (1000) */
    box-sizing: border-box;
    font-size: smaller;
}

/* 4. Individual Rows */
.autocompleteSearchResult {
    padding: 0.5em 0.8em;
    border-bottom: 0.1em solid var(--color-light);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.autocompleteSearchResult:last-child {
    border-bottom: none;
}

/* 5. Active State (Hover + Keyboard Navigation) */
.autocompleteSearchResult:hover,
.autocompleteSearchResult.active {
    /* Uses your system variables */
    background-color: var(--color-light); 
    color: var(--color-success); 
    font-weight: 500;
}

/* 6. "Create New" Link styling (if used) */
.autocompleteCreateNew {
    padding: 0.5em 0.8em;
    color: var(--color-theme);
    font-weight: bold;
    border-top: 0.1em solid var(--color-light);
}