/* 1. Contenitore della lista: ricalca i bordi e l'ombra di Bootstrap */
.ui-autocomplete {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem; /* Stesso valore del tuo .form-control */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Ombra stile dropdown Bootstrap */
    z-index: 1050; /* Superiore a modal e altri elementi */
    padding: 0;
    margin-top: 2px;
    list-style: none;
    overflow-x: hidden;
}

/* 2. Il singolo elemento della lista */
.ui-menu-item {
    padding: 0; /* Resetto per gestire il padding nel link interno */
    border: none !important;
}

    /* 3. Il contenuto testuale dell'elemento (il link generato da jQuery UI) */
    .ui-menu-item .ui-menu-item-wrapper {
        display: block;
        padding: 0.375rem 0.75rem; /* Stesso padding del tuo .form-control */
        font-size: 0.875rem; /* Come il tuo .form-control-sm */
        color: #212529; /* Il tuo colore testo */
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
    }

        /* 4. Stato "Hover" o "Focus": ricalca il blu di Bootstrap */
        .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
            background-color: var(--color-a) !important; /* Blu primario Bootstrap 5 */
            color: #fff !important;
            margin: 0 !important;
            border: none !important;
        }

/* 5. Integrazione visiva con l'input quando la lista è aperta */
/* Se vuoi che l'input sembri "fuso" con la tendina */
.ui-autocomplete-input.ui-autocomplete-open {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Il tuo box-shadow focus */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}